<line>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line
systemLanguage
x1
x2
y1
y2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기