HTML 그래픽 – 다각형

다각형

SVG 다각형 – <polygon>

<polygon> 요소는 세 개 이상의 변을 가진 그래픽을 만드는 데 사용된다.

다각형은 직선으로 구성되며, 모양은 “닫힌” 형태다 (마지막 점이 자동으로 첫 번째 점과 연결됨).

<polygon> 요소에는 다각형의 점을 정의하는 하나의 기본 속성이 있다.

세 변을 가진 다각형

<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">

  <polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />

</svg>

• <points> 속성은 다각형의 각 모서리에 대한 x 및 y 좌표를 정의한다.

네 변을 가진 다각형

<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">

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

</svg>

여섯 변을 가진 다각형

<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">

  <polygon points="150,15 258,77 258,202 150,265 42,202 42,77" style="fill:lime;stroke:purple;stroke-width:3" />

</svg>

다각형 별

<polygon> 요소를 사용하여 별을 만든다:

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">

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

</svg>

또 다른 다각형 별

fill-rule 속성을 사용하여 도형의 내부 부분을 지정한다:

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">

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

</svg>

• fill-rule 속성은 도형의 내부 부분을 지정하기 위해 사용할 알고리즘을 정의한다.