HTML 그래픽 – 라인

라인

SVG 라인 – <line>

<line> 요소는 선을 만드는 데 사용된다.

<line> 요소는 시작 위치 (x1,y1)와 끝 위치 (x2,y2) 사이에 선을 생성한다.

<line> 요소에는 선의 위치와 길이를 설정하는 네 가지 기본 속성이 있다.

SVG 라인

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">

  <line x1="0" y1="0" x2="300" y2="200" style="stroke:red;stroke-width:2" />

</svg>

• <x1> 및 <y1> 속성은 선의 시작점 (0,0)을 정의한다.
• <x2> 및 <y2> 속성은 선의 끝점 (300,200)을 정의한다.

수평선

<svg height="50" width="300" xmlns="http://www.w3.org/2000/svg">

  <line x1="0" y1="10" x2="250" y2="10" style="stroke:red;stroke-width:12" />

</svg>

• <x1> 및 <y1> 속성은 선의 시작점 (0,10)을 정의한다.
• <x2> 및 <y2> 속성은 선의 끝점 (250,10)을 정의한다.

수직선

<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">

  <line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />

</svg>

• <x1> 및 <y1> 속성은 선의 시작점 (0,0)을 정의한다.
• <x2> 및 <y2> 속성은 선의 끝점 (0,200)을 정의한다.