SVG Polygon

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Polygon - <polygon>

<polygon> 태그는 최소 3개의 면을 가진 그래픽요소를 만들때 사용한다.

Polygon들은 곧은 선들로 이루어져있다. 그리고 모양은 "닫혀있다"

Polygon 은 그리스어로부터 왔다. "Poly" 의 의미는 "많은" 그리고 "gon" 은 "각".

예제 1

아래 예제는 3개의 면을 가진 polygon 이다.

SVG 코드

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

코드 설명

• points 속성은 polygon 각 코너의 x,y 좌표를 나타낸다. (200,10) ==> 첫번째 x,y (250,190) ==> 두번째 x,y (160,210) ==> 세번째 x,y

예제 2

아래 예제는 4 개의 면을 가진 polygon 이다.

SVG 코드

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

예제 3

<plygon> 태그를 가지고 별 만들기

SVG 코드

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

예제 4

fill-rule 요소의 "evenodd" 속성을 이용해 바꾸기

SVG 코드

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

출처 W3SCHOOL.COM - SVG - Polygon

http://www.w3schools.com/svg/svg_polygon.asp