How I can draw a SVG path with a repeated symbol along the path ?
An example in this picture :
https://i.stack.imgur.com/jqy0Z.png
Thanks a lot !
How I can draw a SVG path with a repeated symbol along the path ?
An example in this picture :
https://i.stack.imgur.com/jqy0Z.png
Thanks a lot !
You can use a <marker>
element to place a symbol at each vertex of a polyline. This has the advantage that the symbols can be automatically aligned to the path direction. However, you will still have to place each vertex there yourself. I don't think there is any way of having a symbol repeat automatically at a fixed interval along a path.
<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>