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>