SVG絕對線標記尺寸

Question

我有一堆代表使用折線旅行的SVG。

我正在使用非縮放筆畫向量效果來確保每個多段線都以絕對寬度呈現。所以當viewBox的尺寸發生變化時，折線的寬度不會變大。

在上述多義線的末尾，我想放置標記。我希望標記的大小也一樣。我認爲這應該很容易通過設置標記單位strokeWidth。

與多段線的筆劃發生的情況相反，多段線末端標記的大小隨viewBox的大小而變化。

下面我已經包括了一個例子，我在哪裏使用了簡單的標記圓圈。

<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的小東西。不幸的是，那個時候顯然錯過了這個問題，我想沒人會把它當作一個bug報告。儘管我看到它在S.O.上被問到。先前。

好消息是，SVG2規範specifically notes it as something that should be addressed，雖然現在沒有幫助你。