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
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>
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