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>