<polyline>
<polyline> 요소는 SVG 기본 모양으로 여러 점을 연결하는 직선을 그릴 때 사용합니다.
<polyline>
<polyline> 요소는 직선을 그립니다.
정의(Definition)
- <polyline> 요소는 SVG 기본 모양으로 여러 점을 연결하는 직선을 그릴 때 사용합니다.
- <polyline> 요소는 첫 번째 점과 끝 점이 연결될 필요가 없는 열린 모양을 만듭니다.
속성(Property)
| 속성 | 설명 |
|---|---|
| points | 다각형에 필요한 점(x축, y축)의 좌표값을 설정합니다. |
1. 폴리라인 
SVG를 이용한 폴리라인입니다.
Sample1
HTML
<div class="svgBox">
<svg class="svg">
<polyline class="polyline1" points="20,17 57,136 123,49"></polyline>
</svg>
<svg class="svg">
<polyline class="polyline2" points="64,25 20,119 129,137 36,43 125,45 92,145"></polyline>
</svg>
</div>CSS
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.polyline1 {fill: none; stroke-width: 2; stroke: #880e4f;}
.polyline2 {fill: none; stroke-width: 2; stroke: #880e4f;}TOTAL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG</title>
<style>
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.polyline1 {fill: none; stroke-width: 2; stroke: #880e4f;}
.polyline2 {fill: none; stroke-width: 2; stroke: #880e4f;}
</style>
</head>
<body>
<div class="svgBox">
<svg class="svg">
<polyline class="polyline1" points="20,17 57,136 123,49"></polyline>
</svg>
<svg class="svg">
<polyline class="polyline2" points="64,25 20,119 129,137 36,43 125,45 92,145"></polyline>
</svg>
</div>
</body>
</html>호환성(Compatibility)
더보기
caniuse.com
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <polyline> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
참고(Reference)
- MDN SVG
- Scalable Vector Graphics (SVG)2
