SVG에서 선 끝에 도형 달기(화살표 선 표현 예)

SVG를 이용해 웹에서 원하는 도형을 표현할 수 있는데요. 이 중 어떤 라인의 끝에 도형을 달아 화살표 선을 표현하는 SVG에 대한 코드입니다.

코드를 보면 SVG의 기능 중 marker 정의를 이용하고 있습니다. CAD에서의 Block 개념처럼.. 마치 도형을 미리 정의해 두고 재활용하는 방식입니다. marker의 orient를 auto로 지정해 선의 기울기에 맞춰 자동으로 회전할 수 있고, 회전시 원점을 지정하기 위해 refX와 refY값을 이용합니다.

정의해둔 marker는 polyline 등과 같은 SVG 요소의 marker-end 등과 같은 속성에 마커의 ID 값을 지정하면 됩니다.

결과는 아래와 같습니다.

참고로 위의 결과는 IE보다 Chrome이 더 나은 결과를 제공합니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.