8

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 !

0

1 Answer 1

11

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>

1
  • Thanks a lot for your answer !! It's perfect ! Dec 13, 2015 at 13:11

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.