svg에서 요소 사용 및 마커 속성 도입

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) "

추천 관련 기사:

React에서 svg를 사용하는 다양한 방법 요약(코드 포함)

위 내용은 svg에서 요소 사용 및 마커 속성 도입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!