<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

브라우저 호환성

BCD tables only load in the browser

같이 보기