SVG 가이드

SVG 요소

SVG <polyline> 곡선 그리기

polyline 요소는 SVG의 기본 형상 중 하나로, 여러 점을 연결하는 일련의 직선을 만들기 위해 사용됩니다. 일반적인 polyline는 마지막 점이 첫 번째 점과 연결되지 않는 열린 형상을 만들기 위해 사용됩니다

둥근선 예제

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

예제

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

테스트를 보세요 ‹/›

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

삼각형을 그립니다

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

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

테스트를 보세요 ‹/›

실행 후 효과 예시 그림:

多条线由点标识。每个点在points属性中均以x，y列出。此示例有3점이 있습니다. 이들은 삼각형을 정의합니다.
다음과 같은3점을 선으로 연결하여 채우면 됩니다. 기본 채우기 색상은 검정입니다.

녹색의 삼각형을 그립니다.

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

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

테스트를 보세요 ‹/›

실행 후 효과 예시 그림:

귀하는 이미지의 삼각형에서 선의 색상(dark green)으로 그려진 선이 두 개밖에 없다는 것을 알고 계셨을 것입니다. 이유는, 나열된 점 사이의 선만 그려졌기 때문입니다. 첫 번째 점으로 돌아가는 선은 그려지지 않았습니다. 이를 위해 points를 다시 사용하여 첫 번째 점을 다음과 같이 추가합니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52　　10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

테스트를 보세요 ‹/›

이 style 속성은 선의 색상과 두께 및 채우기 색상을 설정합니다.

SVG <polygon> 다각형 그리기 SVG <line> 선 그리기