SVG 절대 라인 마커 크기

Question

폴리 라인을 사용하는 여행을 나타내는 SVG가 있습니다.

저는 비경 구 스트로크 벡터 효과를 사용하여 각 폴리선이 절대 너비로 렌더링되는지 확인했습니다. 따라서 viewBox의 치수가 변경되면 폴리 라인의 너비가 변경되지 않습니다.

언급 된 폴리선 끝에는 마커를 넣기를 원했습니다. 나는 마커가 절대적으로 크기가되도록하고 싶다. 마커 단위를 strokeWidth로 설정하여이 작업이 쉬워 져야한다고 생각했습니다.

폴리 라인의 획에 어떤 변화가 발생하는지와 달리 폴리 라인의 끝에있는 마커의 크기는 뷰 박스의 크기와 함께 변경됩니다.

아래에는 마커에 간단한 원을 사용한 예가 나와 있습니다. 또한

<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="131890.80533333332 85178.93015415945 198.25991111111944 205.10300513348193"> 
    <defs> 
    <marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    <marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    </defs> 
    <g> 
    <polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132089.06524444444, 85384.03315929293 131890.80533333332, 85178.93015415945"> 
    </polyline> 
    </g> 
</svg> 

<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="132038.56071111112 85364.68902323228 50.557866666669725 19.330493533576373"> 
    <defs> 
    <marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    <marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    </defs> 
    <g> 
    <polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132038.56071111112, 85364.68902323228 132089.1185777778, 85384.01951676585"> 
    </polyline> 
    </g> 
</svg> 

참조 : https://jsfiddle.net/u4bmupza/3/

가 좀 SVG 실종 속성 아니면 수동으로 마커의 크기를 계산해야합니까?

Answer 1

vector-effect="non-scaling-stroke은 SVG 1.2 Tiny에 처음 도입되었습니다. 이것은 제한된 전력을 가진 모바일 장치를위한 SVG의 하위 집합입니다. SVG 1.2에는 마커가 없었기 때문에이 문제는 문제가되지 않았습니다.

vector-effect은 SVG 1.2 Tiny에서 브라우저가 구현이 끝난 유일한 것입니다. 불행히도,이 문제는 분명히 그 당시에는 그리워졌고 아무도 버그로보고하기를 귀찮아하지 않았습니다. 나는 그것을 보았지만 S.O. 이전에

좋은 소식은 SVG2 사양 specifically notes it as something that should be addressed이지만 지금은 도움이되지 않습니다.