如何自定義SVG筆畫Linecap

我想知道是否有人試圖在SVG stroke-linecap上創建自定義形狀。而不是標準（圓形，方形），我想在倒數計時器的路徑上創建一個逆半圓。讓我知道這是否可能與SVG /如果任何人嘗試類似的東西。問候蘇雷什如何自定義SVG筆畫Linecap

來源

2016-06-21 sur

附加一個標記，以通過標記末端和標記開始的行。 –

正如羅伯特建議，你可以使用一個<marker>，與marker-end，爲自定義端蓋添加到訂單。

<svg> 
 
    
 
    <defs> 
 
    <marker id="InverseSemicircleEnd" 
 
     viewBox="0 0 5 10" refX="0" refY="5" 
 
     markerUnits="strokeWidth" 
 
     markerWidth="0.5" markerHeight="1" 
 
     orient="auto"> 
 
     <path d="M 0 0 L 5 0 A 5 5 0 0 0 5 10 L 0 10 z" /> 
 
    </marker> 
 
    </defs> 
 
    
 
    <line y1="75" x2="270" y2="75" 
 
     fill="none" stroke="black" stroke-width="40" 
 
     marker-end="url(#InverseSemicircleEnd)" /> 
 
</svg>

來源

2016-06-21 16:09:49

標記在IE上非常複雜 - 您可能需要試驗 –

是的，我忘了提及。 IE使用'markerUnits =「strokeWidth」'定義的標記存在長期存在的錯誤。您可以使用固定寬度重新定義標記，但是您需要爲每個筆劃寬度使用一個標記。 –

如何自定義SVG筆畫Linecap

回答

相關問題