<line>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
<line> SVG 요소는 두 개의 점을 연결하는 선을 생성하는 기본적인 SVG 모양입니다.
예제
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
<!-- 색상을 지정하지 않으면
선이 보이지 않습니다. -->
</svg>
특성
x1-
선의 시작 지점의 x축 좌표를 설정합니다. 값의 타입: <length>|<percentage>|<number> ; 기본 값:
0; 애니메이션 설정 여부: yes x2-
선의 마지막 지점의 x축 좌표를 설정합니다. 값의 타입: <length>|<percentage>|<number> ; 기본 값:
0; 애니메이션 설정 여부: yes y1-
선의 시작 지점의 y축 좌표를 설정합니다. 값의 타입: <length>|<percentage>|<number> ; 기본 값:
0; 애니메이션 설정 여부: yes y2-
선의 마지막 지점의 y축 좌표를 설정합니다. 값의 타입: <length>|<percentage>|<number> ; 기본 값:
0; 애니메이션 설정 여부: yes pathLength-
사용자 단위의 전체 선 길이를 설정합니다. 값의 타입: <number> ; 기본 값: none; 애니메이션 설정 여부: yes
사용 일람
명세서
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LineElement |
브라우저 호환성
Loading…
같이 보기
- 다른 기본 SVG 모양:
<circle>,<ellipse>,<polygon>,<polyline>,<rect>