>  기사  >  웹 프론트엔드  >  HTML5를 사용하여 SVG 벡터 그래픽을 그리는 코드

HTML5를 사용하여 SVG 벡터 그래픽을 그리는 코드

不言
不言원래의
2018-06-20 10:00:352673검색

이 글에서는 기본 그래픽 그리기 및 간단한 그라데이션 효과 소개를 포함하여 HTML5를 사용하여 SVG 벡터 그래픽을 그리는 입문 튜토리얼을 주로 소개합니다. IE의 이전 버전에서는 이를 잘 지원하지 않으므로 필요한 친구는 참조할 수 있습니다.

VG는 2D 그래픽을 설명하는 데 사용되는 언어인 Scalable Vector Graphics의 약자입니다. 그래픽 애플리케이션은 XML을 사용하여 작성된 후 SVG 리더 프로그램에 의해 렌더링됩니다.

SVG는 원형 차트, X, Y 좌표계의 2차원 차트 등과 같은 벡터 유형 차트에 주로 사용됩니다.

SVG는 2003년 1월 14일에 W3C 권장 사항이 되었습니다. SVG 사양 페이지에서 최신 버전의 SVG 사양을 볼 수 있습니다.

SVG 파일 보기
대부분의 웹 브라우저는 PNG, GIF 및 JPG 그래픽을 표시할 수 있는 것처럼 SVG를 표시할 수 있습니다. IE 사용자는 브라우저에서 SVG를 보려면 Adobe SVG Reader를 설치해야 할 수도 있습니다.

HTML5에 SVG 삽입
HTML5를 사용하면 __486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948 태그를 사용하여 SVG를 직접 삽입할 수 있습니다. 다음은 간단한 구문입니다.

<svg xmlns="http://www.w3.org/2000/svg">
...       
</svg>

HTML5 - SVG Circle

여기는 HTML5입니다. 원을 그리기 위해 30de22e41cb8eb8fbfdc1f091d85e4be 태그를 사용하는 SVG 예제 버전:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

HTML5가 활성화된 최신 버전의 FireFox에서 생성:

2016219112130340.jpg (223×186)


HTML5 - SVG Rectangle
여기는 SVG 예제입니다. 직사각형을 그리기 위해 b4bf76d38c0ddeed94a3943f1fc9c8ad 태그를 사용하는 HTML5 버전:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>

HTML5가 활성화된 최신 버전의 FireFox에서는 다음과 같은 결과가 생성됩니다.

2016219112200272.jpg (316×152)


HTML5 - SVG Lines
여기는 HTML5 버전의 SVG 예에서는 15a73cc5312745b1b00671f6e690e36a 태그를 사용하여 선을 그립니다.

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

스타일 속성을 사용하여 획, 채우기 색상, 획 너비 등과 같은 추가 스타일 정보를 설정할 수 있습니다.

HTML5를 사용하는 최신 버전의 FireFox에서는 다음 결과가 활성화되었습니다.
2016219112220725.jpg (217×159)


HTML5 - SVG Ellipse
다음은 d9b42b40d0fdc429c7c48871eea4816c 태그를 사용하여 타원을 그리는 SVG 예제의 HTML5 버전입니다.

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>

In HTML5가 활성화된 최신 버전의 FireFox는 다음과 같은 결과를 생성합니다.

2016219112240763.jpg (225×148)


HTML5 - SVG Polygon
다음은 6f1cb7f8499a7e0f625f982868cbc44d 태그를 사용하여 SVG 예제의 HTML5 버전입니다. :

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon  points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>

HTML5가 활성화된 경우 최신 버전의 FireFox는 다음과 같은 결과를 생성합니다.

2016219112258796.jpg (310×118)


HTML5 - SVG Polyline
다음은 ce803ba1a4290bddb3ba9c6f57d4c9b4 태그를 사용하여 SVG 예제의 HTML5 버전입니다. 꺾은선형 차트:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>

HTML5를 활성화하면 최신 버전의 FireFox에서 다음 결과가 생성됩니다.

2016219112318049.jpg (245×114)


HTML5 - SVG Gradient
다음은 <를 사용하는 SVG 예제의 HTML5 버전입니다. ;ellipse> 태그를 사용하여 타원을 그리고 0649cc1cc16c8306177acf255def2211 태그를 사용하여 SVG 방사형 그래디언트를 정의합니다.

bffa9ad35fc32d811cd3bf50cdea268e 태그를 사용하여 비슷한 방식으로 SVG 선형 그래디언트를 만들 수 있습니다.

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%"
      fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200);   
      stop-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255);   
      stop-opacity:1"/>
      </radialGradient>
   </defs>
   <ellipse cx="100" cy="50" rx="100" ry="50"
      style="fill:url(#gradient)" />
</svg>
</body>
</html>

HTML5가 활성화된 최신 버전의 FireFox에서는 다음과 같은 결과가 생성됩니다.

2016219112338977.jpg (319×157)

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

HTML5 사용 방법 파일 인터페이스는 웹 페이지에서 파일을 다운로드하는 데 사용됩니다

HTML5에서 그림 회전의 애니메이션 효과를 얻는 방법

HTML5 Canvas는 곡선 그리기 방법을 구현합니다

위 내용은 HTML5를 사용하여 SVG 벡터 그래픽을 그리는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.