SVG 마커: 정렬을 유지하는 사용자 정의 화살촉 만들기
사용자 정의 SVG 화살촉을 만들고 끝을 정렬하며 시작 마커를 뒤집으세요. 직접 작성해 브라우저로 렌더링한 예제에서 두 스트로크 너비의 크기를 비교하세요.
목차
SVG 경로에 사용자 정의 화살촉을 붙이려면 <marker> 안에 아트워크를 정의하고 marker-end로 ID를 참조하세요. 경로 끝점에 맞닿아야 할 아트워크의 점으로 refX와 refY를 설정하세요. 그런 다음 마커가 경로에 따라 회전할지, 스트로크 너비에 따라 커질지 선택하세요.
이 선택들은 서로 다른 문제를 해결합니다. 화살표가 올바른 방향을 가리켜도 끝점에서 어긋날 수 있습니다. 얇은 스트로크에서는 잘 맞지만 선을 두껍게 만들면 너무 커질 수도 있습니다. 이 설명은 직접 만든 포인터 도형 하나로 배치, 방향, 크기를 구분합니다.
작고 완전한 SVG로 시작하기
다음을 markers.svg로 저장하고 브라우저에서 여세요. 포인터는 직접 작성한 예제이며 12 × 12 좌표 공간에서 끝이 (11, 6)에 있습니다. PerfectVector 변환 결과가 아닙니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
<defs>
<marker id="pv-pointer" viewBox="0 0 12 12"
refX="11" refY="6" markerWidth="6" markerHeight="6"
markerUnits="strokeWidth" orient="auto-start-reverse">
<path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
</marker>
</defs>
<g fill="none" stroke="#20364d" stroke-width="4"
marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
<path d="M50 45 H350"/>
<path d="M50 135 C130 75,260 195,350 135"/>
</g>
</svg>첫 경로는 직선, 두 번째는 곡선입니다. 둘 다 양 끝에서 같은 마커를 참조합니다. <defs> 블록은 정의를 저장하고 경로의 참조가 마커를 보이게 합니다. MDN의 marker 참조는 시작, 중간, 끝의 부착 속성을 다룹니다.
포함하는 문서에서 유일한 ID를 사용하세요. 여러 SVG를 인라인으로 결합한다면 마커 ID에 접두사를 붙이고 모든 해당 url(#...) 참조를 업데이트하세요. SVG 심볼 스프라이트 가이드는 재사용 아이콘의 같은 참조 관리 문제를 설명합니다.
의도한 점을 끝점에 놓기
refX="11" refY="6"은 마커 아트워크의 어떤 점이 경로 끝점과 일치해야 하는지 지정합니다. 경로 자체를 옮기지는 않습니다. 이 예제에서 그 점은 날카로운 끝입니다.
refX="0" refY="0"과 비교하세요. 브라우저는 마커의 좌표 원점을 끝점에 놓아 수평선에서 화살촉 끝이 더 오른쪽, 더 아래에 위치하게 합니다. 마커를 키우면 오류가 더 잘 보일 뿐 기준점이 수정되지는 않습니다.
MDN은 refX와 refY를 마커의 기준점 좌표로 설명합니다. 표시 너비로 추측하지 말고 viewBox를 포함한 아트워크 자체 좌표를 기준으로 읽으세요.
전체 SVG를 따로 열고 브라우저에서 비교를 렌더링했습니다. 기준점을 바꾸면 끝이 주황색 십자에 맞춰졌습니다. 방향 설정을 바꾸면 시작 화살표가 뒤집혔습니다. 단위 모드를 바꾸면 선과 함께 포인터가 커질지 제어할 수 있었습니다. 이는 이 예제의 관찰 결과입니다. 실제 내보낸 파일을 받을 애플리케이션에서 확인하세요.
끝을 정확히 끝점에 맞춰도 스트로크는 그 점까지 계속 뻗습니다. 비교에서 보이듯 두꺼운 선에서는 스트로크 일부가 좁은 화살촉 끝 옆에 남을 수 있습니다. 그 이음부가 중요하면 모티프, 기준점, 경로 끝점을 함께 조정하고 연결부를 검사하세요. 마커 배치는 기반 스트로크를 자르지 않습니다.
곡선이 방향을 제어하게 하기
경로 끝의 화살촉에서 orient="auto"는 그 점의 경로 방향을 따릅니다. 곡선의 끝 방향은 로컬 접선에서 나오므로 화살표가 경로의 두 끝점 사이 직선 방향을 가리킬 필요는 없습니다.
양 끝에 화살표를 붙이려면 orient="auto-start-reverse"를 사용하세요. 끝에서는 auto처럼 동작하지만 시작 마커에는 180도 추가 회전을 적용합니다. MDN의 orient 문서는 양 끝에서 바깥을 가리키는 하나의 화살촉을 재사용하는 방법으로 설명합니다.
오른쪽 위 비교에서 차이가 드러납니다. auto에서는 시작 포인터가 곡선을 따라 향합니다. auto-start-reverse에서는 시작점 바깥으로 향합니다. 수동으로 뒤집은 두 번째 도형 복사본이 필요하지 않습니다.
예상과 다른 결과가 나오면 경로 방향을 확인하세요. 경로를 뒤집으면 어느 끝이 시작인지 바뀝니다. 두 끝의 화면 위치가 이전과 같더라도 흐름을 표시하는 화살표는 그 방향에 맞게 붙여야 합니다.
선 두께가 마커 크기를 바꿀지 결정하기
markerUnits는 마커 치수와 콘텐츠에 사용할 좌표계를 설정합니다. 기본값은 strokeWidth, 대안은 userSpaceOnUse입니다. 차이는 MDN의 markerUnits 참조를 확인하세요.
| 선택 | 스트로크가 4에서 8로 바뀔 때 | 유용한 경우 |
|---|---|---|
strokeWidth | 마커 치수가 두 배가 됨 | 화살촉이 선 두께와의 비율을 유지해야 할 때 |
userSpaceOnUse | 참조 요소의 사용자 좌표에서 마커 치수가 유지됨 | 여러 선 두께에서 모티프 크기를 유지해야 할 때 |
포인터는 viewBox의 가로 12 단위 중 10 단위를 차지합니다. markerWidth="6"과 markerUnits="strokeWidth"일 때 회전 전 너비는 10 / 12 × 6 × stroke-width로, 4 단위 스트로크에서는 사용자 단위 20, 8 단위에서는 40입니다. 왼쪽 아래 비교는 이 설정을 사용합니다.
두 선 두께 모두에서 포인터 너비를 20 단위로 유지하려면 정의를 다음으로 바꾸세요.
markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"오른쪽 아래 비교는 이 값을 사용합니다. markerWidth="6"을 유지하고 단위 모드만 바꾸면 포인터가 훨씬 작아집니다. 6 단위에 더는 스트로크 너비가 곱해지지 않기 때문입니다.
userSpaceOnUse는 고정된 화면 픽셀 수를 뜻하지 않습니다. 주변 SVG나 좌표계를 확대·축소하면 표시 크기가 여전히 달라질 수 있습니다. 특히 큰 모티프를 작은 도표 주석으로 줄일 때 최종 레이아웃 크기에서 마커를 검사하세요.
마커를 만들기 전에 사용자 정의 모티프 준비하기
삼각형이나 단순한 포인터는 경로를 직접 그리세요. 기존 벡터 아트워크는 원래 경로를 유지하고 어느 좌표를 선에 붙일지 결정하세요. 의도한 구멍을 보존하고 사용 크기에서 사라지는 디테일을 단순화하며 마커 뷰포트 내부에 충분한 공간을 주세요.
사용자 정의 화살촉이나 장식 모티프가 PNG나 JPG로만 남아 있다면 PerfectVector의 이미지 벡터화 작업 흐름으로 이 구성 단계 전에 SVG 후보를 복원할 수 있습니다. 실루엣과 작은 구멍을 원본과 비교하고 불필요한 배경 도형을 제거한 뒤 승인한 아트워크의 경계와 기준점을 선택하세요. 변환은 마커 정의를 만들거나 경로 방향을 지정하거나 도표 연결선 동작을 추가하지 않습니다.
테스트 중에는 색상을 명시적으로 지정하세요. 이 예제는 청록색 마커와 남색 선을 사용해 경계가 보이게 합니다. 자신의 화살표가 전체적으로 한 색이어야 한다면 두 페인팅을 의도적으로 설정하고 전달 결과를 검사하세요. SVG 색상 편집 가이드는 색상 변경을 방해할 수 있는 고정 채우기와 스타일을 다룹니다.
사용할 곳에서 파일 확인하기
편집 가능한 마스터를 보관하고 실제 웹사이트, 편집기, 내보내기 작업 흐름에서 전달용 복사본을 테스트하세요. 올바른 브라우저 미리보기는 그 파일의 브라우저 외관을 확인하며 모든 애플리케이션의 가져오기 동작을 확인하지는 않습니다.
- 구성이나 최적화 뒤에 각
url(#...)가 의도한 마커 ID를 가리키는지 확인하세요. - 시작 마커를 사용한다면 포함해 직선과 곡선 경로를 확인하세요.
- 디자인의 가장 얇은 선과 가장 두꺼운 선을 비교하세요.
- 최종 표시 크기로 끝, 연결부, 잘린 아트워크를 검사하세요.
- 전달한 SVG를 독립적으로 다시 열어 원본 미리보기와 비교하세요.
마커는 경로 위치에 붙는 시각적 장식입니다. 도표 객체 사이의 의미 있는 연결을 만들지는 않습니다. 도표 편집기 자체 연결점과 스텐실 동작에는 네이티브 도형 시스템을 사용하세요. draw.io 사용자 정의 도형 가이드는 그 별개의 작업을 다룹니다.
마커가 자동으로 물리적으로 연결된 절단 윤곽이 되는 것도 아닙니다. 대상에 닫힌 절단 기하학적 형태가 필요하면 벡터 편집기에서 별도의 경로 기반 전달용 복사본을 준비하고 검사하세요. 화면에서 선과 화살촉이 겹친다고 통합 윤곽이라는 증거는 아닙니다. 더 많은 SVG 준비 가이드는 아트워크 정리와 후속 확인을 다룹니다.
FAQ
SVG 화살촉이 선에서 어긋나는 이유는 무엇인가요? 마커 아트워크 좌표를 기준으로 refX와 refY를 확인하세요. 경로 끝점에 배치할 점을 지정합니다. 이 예제에서 끝은 11,6입니다. 0,0을 사용하면 대신 원점이 그곳에 놓입니다.
하나의 화살촉을 양 끝에 재사용하려면 어떻게 하나요? marker-start와 marker-end로 같은 마커를 참조하고 orient="auto-start-reverse"를 사용하세요. 시작 인스턴스는 뒤집히고 끝 인스턴스는 경로 방향을 따릅니다.
선을 두껍게 하면 화살촉이 커지는 이유는 무엇인가요? 기본 markerUnits 값은 strokeWidth입니다. 요소의 사용자 좌표에서 마커 크기를 유지해야 한다면 userSpaceOnUse를 사용하고 해당 단위 체계에 맞게 markerWidth와 markerHeight를 조정하세요.
마커가 화살표를 하나의 닫힌 경로로 만드나요? 아닙니다. 마커 정의는 참조하는 경로와 별도로 유지됩니다. 후속 절단이나 편집 작업 흐름에 필요하면 실제로 연결된 기하학적 형태를 준비하고 검사하세요.
Sources
- MDN — marker — 마커 정의, 지원 도형, 부착 속성을 설명합니다.
- MDN — refX — 마커 좌표계의 수평 기준점 배치를 설명합니다.
- MDN — refY — 마커 좌표계의 수직 기준점 배치를 설명합니다.
- MDN — orient — 자동 회전과 시작 인스턴스 반전을 설명합니다.
- MDN — markerUnits — 스트로크 상대 크기와 사용자 좌표 크기를 설명합니다.
모티프 하나로 시작해 직선과 곡선 모두에서 기준점, 방향, 크기를 확인하세요. 자신의 모티프가 래스터 이미지로만 있다면 SVG 후보를 준비하고 실루엣과 구멍을 검사한 뒤 확정한 경로를 마커로 구성하세요.
