HTML5를 사용하여 SVG 벡터 그래픽을 그리는 코드-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

不言

Jun 20, 2018 am 10:00 AM

html5 svg 벡터 일러스트 레이 션

이 글에서는 기본 그래픽 그리기 및 간단한 그라데이션 효과 소개를 포함하여 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를 사용하면 __ 태그를 사용하여 SVG를 직접 삽입할 수 있습니다. 다음은 간단한 구문입니다.

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

로그인 후 복사

HTML5 - SVG Circle

여기는 HTML5입니다. 원을 그리기 위해 태그를 사용하는 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 예제입니다. 직사각형을 그리기 위해 태그를 사용하는 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 예에서는 태그를 사용하여 선을 그립니다.

<!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
다음은 태그를 사용하여 타원을 그리는 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
다음은 태그를 사용하여 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
다음은 태그를 사용하여 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> 태그를 사용하여 타원을 그리고 태그를 사용하여 SVG 방사형 그래디언트를 정의합니다.

태그를 사용하여 비슷한 방식으로 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)