SVG <polygon>

SVG 다각형 - <polygon>

<polygon> 요소는 최소 3변을 가진 그래픽을 생성하는 데 사용됩니다.

다각형은 직선으로 구성되며, 모양이 "결합된"(모든 선이 연결된) 것입니다.

Polygon이라는 단어는 그리스어에서 비롯되었습니다. "Poly"는 "많은"을 의미하며, "gon"은 "각도"를 의미합니다.

예제 1

다음 예제는 세 변을 가진 다각형을 생성합니다：

이 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

다음 예제는 네 변을 가진 다각형을 생성합니다：

이 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

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>

직접 시도해 보세요