Mingg's Diary

SVG <marker>

SVG 마커 – <marker>

<marker> 요소는 <line>, <path>, <polyline>, 또는 <polygon>의 시작, 중간, 끝에 마커를 만들기 위해 사용한다.

모든 SVG 마커는 <defs> 요소 안에 정의된다. <defs> 요소는 “definitions”의 약자로, 특별한 요소 (마커 등)의 정의를 포함한다.

마커는 marker-start, marker-mid, marker-end 속성을 사용하여 도형에 부착한다.

<marker> 요소는 마커의 위치와 크기를 설정하는 6가지 기본 속성을 가진다.

속성명	설명
id	마커의 고유 ID.
markerHeight	마커의 높이. 기본값은 3이다.
markerWidth	마커의 너비. 기본값은 3이다.
refX	마커가 정점(vertex)과 연결될 x 위치. 기본값은 0이다.
refY	마커가 정점(vertex)과 연결될 y 위치. 기본값은 0이다.
orient	마커가 부착되는 도형에 대한 마커의 방향. “auto”, “auto-start-reverse” 또는 각도를 사용할 수 있으며, 기본값은 0이다.

시작 및 끝 마커가 있는 선

다음 예제는 원형 시작 마커와 화살표 끝 마커가 있는 선을 생성한다.

<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<defs>

<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">

<circle cx="5" cy="5" r="3" fill="black" />

</marker>

<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">

<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />

</marker>

</defs>

<line x1="10" y1="10" x2="300" y2="200" stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)" />

</svg>

코드 설명:

<defs> 요소는 두 개의 마커를 포함한다: #circle 마커와 #arrow 마커.
마커의 모양은 <marker> 요소 안에 정의된다.
첫 번째 <marker> 요소는 작은 원을 그리는 <circle> 요소를 포함한다.
두 번째 <marker> 요소는 작은 삼각형을 그리는 <path> 요소를 포함한다.
<line> 요소는 marker-start 속성과 marker-end 속성을 사용하여 두 마커를 참조한다.

중간 마커 추가

다음 예제는 시작 마커, 중간 마커, 끝 마커가 있는 폴리라인을 생성한다.

<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<defs>

<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">

<circle cx="5" cy="5" r="2" fill="black" />

</marker>

<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">

<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />

</marker>

</defs>

<polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3" fill="none" marker-start="url(#circle)" marker-mid="url(#circle)" marker-end="url(#arrow)" />

</svg>

코드 설명

<defs> 요소는 두 개의 마커를 포함한다: #circle 마커와 #arrow 마커.
마커의 모양은 <marker> 요소 안에 정의된다.
첫 번째 <marker> 요소는 작은 원을 그리는 <circle> 요소를 포함한다.
두 번째 <marker> 요소는 작은 삼각형을 그리는 <path> 요소를 포함한다.
<polyline> 요소는 marker-start 속성, marker-mid 속성, 그리고 marker-end 속성을 사용하여 두 마커를 참조한다.
marker-start 속성과 marker-mid 속성이 같은 마커(#circle)를 가리키는 것을 주목해라. 이런 방식으로 마커를 여러 번 재사용할 수 있다.

참고

W3C School - SVG <marker>

HTML 그래픽 – 마커