SVG 강의

SVG 요소

SVG <polygon> 다각형 그리기

polygon 요소는 일련의 직선 구간으로 이루어진 닫힌 다이아몬드 모양을 정의합니다. 마지막 점이 첫 번째 점과 연결됩니다. <polygon> 요소는 일반적으로 다중(3면 또는 더 많은) 측면/끝의 모양입니다.

SVG 다이아몬드 예제

이는 간단한 SVG 다이아몬드 예제입니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon　points="10,0　　60,0　　35,50"
　　　　　　　　　style="stroke:#660000;　fill:#cc3333;"/>
</svg>

테스트해 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

이미 알고 계신 것처럼, 단지 목록을 열거했어도3점, 모두 그려졌습니다3면이 있습니다. 이는 <polygon> 요소가 모든 점 사이에 선을 그리기 때문입니다. 마지막 점에서 첫 번째 점까지의 선도 그립니다. <polyline>는 마지막 점에서 첫 번째 점까지의 선을 그리지 않습니다. 이는 <polygon>와 <polyline> 요소의 유일한 차이입니다.

육각형을 그리세요

예제 코드는 다음과 같습니다:

예제

<svg　width="120"　height="120"　viewPort="0　0　120　120"　version="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon　points="60,20　100,40　100,80　60,100　20,80　20,40"/>　　　　
</svg>

테스트해 보세요 ‹/›

실행 결과는 다음과 같습니다

八角형을 그리세요

이것은 더 큰 예제입니다-8면의 다각형(팔각형):

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon　points="50,5　　　100,5　　125,30　　125,80　100,105
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　style="stroke:#660000;　fill:#cc3333;　stroke-width:　3;"/>
</svg>

테스트해 보세요 ‹/›

SVG 다섯 변의 별 그리기

예제 코드는 다음과 같습니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"　version="1.1">
　　<polygon　points="100,10　40,180　190,60　10,60　160,180"　style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

테스트해 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

SVG <path> 경로 SVG <polyline> 곡선 그리기