SVG <다각형>
SVG 다각형 - <다각형>
<polygon> 요소는 최소한 세 면을 포함하는 그래픽을 만드는 데 사용됩니다.
다각형은 직선으로 이루어지며 모양은 "닫힌" 상태입니다(모든 선이 연결됨).
다각형은 그리스어에서 왔습니다. "Poly"는 "많은"을 의미하고 "gon"은 "각도"를 의미합니다.
실시예 1
다음 예에서는 3면이 있는 다각형을 만듭니다.
다음은 SVG 코드입니다.
예시
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
코드 설명:
- Points 속성은 다각형의 각 모서리에 대한 x 및 y 좌표를 정의합니다.
실시예 2
다음 예에서는 4면이 있는 다각형을 만듭니다.
다음은 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
<polygon> 요소를 사용하여 별을 만듭니다.
다음은 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
채우기 규칙 속성을 "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>