沿着路徑的SVG重複對象或符號

Question

我如何繪製沿着路徑的重複符號的SVG路徑？
一個例子，這樣的畫面：

http://i.stack.imgur.com/jqy0Z.png

非常感謝！

Answer 1

您可以使用<marker>元素在折線的每個頂點放置一個符號。這具有符號可以自動對準路徑方向的優點。但是，您仍然必須自己放置每個頂點。我不認爲有任何方法可以沿路徑以固定間隔自動重複使用符號。

<svg width="400" height="100" viewBox="0 0 400 100"> 
 
    <defs> 
 
    <marker id="chevron" 
 
     viewBox="0 0 20 20" refX="10" refY="10" 
 
     markerUnits="userSpaceOnUse" 
 
     markerWidth="20" markerHeight="20" 
 
     orient="auto" fill="#49f"> 
 
     <path d="M0 0 10 0 20 10 10 20 0 20 10 10Z" /> 
 
    </marker> 
 
    </defs> 
 
    <path d="M40 50 60 59.57 80 67.68 100 73.1 120 75 140 73.1 160 67.68 180 59.57 200 50 220 40.43 240 32.32 260 26.9 280 25 300 26.9 320 32.32 340 40.43 360 50" 
 
     fill="none" stroke="none" 
 
     marker-start="url(#chevron)" 
 
     marker-mid="url(#chevron)" 
 
     marker-end="url(#chevron)" /> 
 
</svg>