본문 바로가기
HTML5/SVG

SVG Polygon

by Jundol 2015. 6. 8.

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

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



SVG Polygon - <polygon>

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

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

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


예제 1

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


Sorry, your browser does not support inline SVG.


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 이다.

Sorry, your browser does not support inline SVG.

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> 태그를 가지고 별 만들기

Sorry, your browser does not support inline SVG.

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" 속성을 이용해 바꾸기
Sorry, your browser does not support inline SVG.


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

'HTML5 > SVG' 카테고리의 다른 글

SVG Path  (6) 2015.06.08
SVG Polyline  (4) 2015.06.08
SVG Line  (6) 2015.06.08
SVG Ellipse  (6) 2015.06.08
SVG Circle  (182) 2015.06.08

댓글