SVG를 사용하여 그린 그래픽은
marker는 하나 이상의 경로, 선, 폴리라인 또는 다각형의 정점을 연결할 수 있는 마커 유형입니다. 가장 일반적인 사용 사례는 출력 결과 줄에 화살표를 그리거나 (폴리마커) 그래픽을 표시하는 것입니다.
<svg width="600px" height="100px"> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> </marker> </defs> <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" /> </svg>
marker 속성
markerWidth 및 markerHeight 속성은 마커 창의 너비와 높이를 정의합니다.
위 예에서는 markerWidth와 markerHeight를 모두 10px로 설정했습니다. 경로에 그려진 삼각형은 9px x 6px 영역에 맞아야 하므로 markerWidth를 9로 설정한 다음 markerHeight를 6으로 설정할 수도 있습니다. 이는 마커가 허용할 수 있는 최소 크기입니다. 이보다 작으면 그래픽이 잘립니다.
다음 두 속성인 refX와 refY는 그래픽 요소와 마커 사이의 연결 위치 좌표를 나타냅니다. 또한 마커를 이동하고 정렬하기 위해 뒤의 장면에 변환을 적용했습니다.
다음 속성인 orient는 선의 방향을 변환할 때 마커를 조정할 필요가 없는 이유입니다. 다른 콘텐츠에 연결될 때 마커를 회전해야 하는지 여부를 결정하는 자동 값 또는 각도 값을 허용합니다.
auto 이 값은 마커가 적용된 요소와 함께 회전한다는 것을 의미합니다. 45deg 값은 마커의 방향이 항상 45deg로 유지되고 연결된 요소와 함께 회전하지 않음을 의미합니다. 대부분의 경우 이 값은 자동으로 설정됩니다.
마지막 속성은 markerUNits로, 마커 크기 조정 여부를 결정하는 데 사용됩니다. 이는 markerWidth 및 markerHeight뿐만 아니라 마커 콘텐츠 자체의 좌표계를 정의합니다.
StrokeWidth와 userSpaceOnUse라는 두 가지 값을 허용합니다. 기본값은 스트로크 너비입니다. 이 값을 사용하면 마커가 연결된 선에 따라 크기를 조정할 수 있으므로 대부분의 경우 이 값을 설정합니다.
strokeWidth: 좌표계의 마커 값과 현재 획 너비의 단위가 동일한 크기입니다. 즉, 스트로크Width 값을 사용하면 마커의 크기를 조정할 수 있습니다.
userSpaceOnUse: 마커의 값은 현재 사용자 좌표계의 값입니다. 즉, 마커가 반경이 10px인 원인 경우 연결된 요소에 관계없이 항상 반경이 10px입니다.
마커 기능 - 요소에서 마커 참조
marker-end="url(#arrow)”
선, 경로, 폴리라인 및 다각형과 같은 기본 그래픽에 마커를 적용하는 방법에는 네 가지가 있습니다.
marker-start=”url(#marker-id )”
marker-mid=”url(#marker-id)”
marker-end=”url(#marker-id)”
marker=”url(#marker-id) "
추천 관련 기사:
Svg에서 좌표계 변환을 구현하는 방법(코드 포함)React에서 svg를 사용하는 다양한 방법 요약(코드 포함)
위 내용은 svg에서
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
