SVG 沿路径重复对象或符号

Posted 2023-02-23

【中文标题】SVG 沿路径重复对象或符号

【英文标题】：SVG repeat object or symbol along path

【发布时间】：2016-03-18 15:20:18

【问题描述】：

如何绘制带有重复符号的 SVG 路径？ 这张图片中的一个例子：

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

非常感谢！

【参考方案1】：

您可以使用<marker> 元素在折线的每个顶点放置一个符号。这样做的好处是符号可以自动与路径方向对齐。但是，您仍然必须自己放置每个顶点。我认为没有任何方法可以让符号沿路径以固定间隔自动重复。

<svg   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>

【讨论】：

非常感谢您的回答！！太完美了！