최신 웹 개발 튜토리얼
 

SVG <다각형>


SVG 다각형 - <다각형>

<polygon> 요소는 적어도 세 개의 측면을 포함하는 그래픽을 생성하는데 사용된다.

다각형 직선 이루어지는 및 형상이되는 "closed" (모든 라인을 연결할).

다각형은 그리스어에서 비롯됩니다. "Poly" 의미 "many""gon" 수단 "angle" .


예 1

다음의 예는 세 가지 측면과 다각형을 생성합니다 :

죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

다음은 SVG 코드는 다음과 같습니다

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
»그것을 자신을 시도

Code explanation:

  • points 속성은 정의 X 및 Y는 다각형의 각 코너 좌표

예 2

다음의 예는 네면에 다각형을 생성합니다 :

죄송합니다, 귀하의 브라우저가 인라인 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

사용 <polygon> 스타를 만드는 요소 :

죄송합니다, 귀하의 브라우저가 인라인 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

로 채우기 규칙 속성을 변경 "evenodd" :

죄송합니다, 귀하의 브라우저가 인라인 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>
»그것을 자신을 시도