SVG 튜토리얼

SVG 요소

SVG <polyline> 곡선 그리기 SVG <ellipse> 타원 그리기

SVG <line> 선 그리기

SVG <line> 요소는 SVG 기본 모양 중 하나로, 두 점을 연결하는 선을 만들기 위해 사용됩니다. <line> 요소는 SVG 이미지 내에서 선을 그리는 데 사용됩니다. 수평 직선, 수직 세로선, 기울기 선 등을 그릴 수 있습니다.

SVG line 온라인 예제

다음은 일반적으로 사용되는 SVG <line>를 사용하여 직선을 그리는 예제입니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line　x1="0"　　y1="10"　x2="0"　　　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="10"　y1="10"　x2="100"　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="20"　y1="10"　x2="100"　y2="50"　　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="30"　y1="10"　x2="110"　y2="10"　　style="stroke:#006600;"></line>
</svg>

테스트를 보세요 ‹/›

이 코드가 실행된 후 선 효과는 다음과 같습니다:

선의 시작点是 x1와 y1속성을 설정하는 점.
선의 끝은 x2와 y2속성을 설정하는 점.
이 style 속성은 선(선)의 색상과 두께를 설정합니다.

SVG <polyline> 곡선 그리기 SVG <ellipse> 타원 그리기