<line>
<line> 요소는 SVG 기본 모양으로 두 점을 연결하는 선을 그릴 때 사용합니다.
<line>
<line> 요소는 선을 그립니다.
정의(Definition)
- <line> 요소는 SVG 기본 모양으로 두 점을 연결하는 선을 그릴 때 사용합니다.
속성(Property)
| 속성 | 설명 |
|---|---|
| x1 | 선의 시작점 x축 좌표 값을 설정합니다. |
| x2 | 선의 끝점 x축 좌표 값을 설정합니다. |
| y1 | 선의 시작점 y축 좌표 값을 설정합니다. |
| y2 | 선의 끝점 y축 좌표 값을 설정합니다. |
| pathLength | 패스의 총 길이 값을 설정합니다. |
1. 라인 
SVG를 이용한 라인입니다.
Sample1
HTML
<div class="svgBox">
<svg class="svg">
<line class="line1" x1="0" y1="0" x2="160" y2="160"></line>
</svg>
<svg class="svg">
<line class="line2" x1="80" y1="80" x2="160" y2="160"></line>
</svg>
</div>CSS
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.line1 {fill: none; stroke-width: 2; stroke: #880e4f;}
.line2 {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;}
.line1 {fill: none; stroke-width: 2; stroke: #880e4f;}
.line2 {fill: none; stroke-width: 2; stroke: #880e4f;}
</style>
</head>
<body>
<div class="svgBox">
<svg class="svg">
<line class="line1" x1="0" y1="0" x2="160" y2="160"></line>
</svg>
<svg class="svg">
<line class="line2" x1="80" y1="80" x2="160" y2="160"></line>
</svg>
</div>
</body>
</html>호환성(Compatibility)
더보기
caniuse.com
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <polyline> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
참고(Reference)
- MDN SVG
- Scalable Vector Graphics (SVG)2
