Question

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

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

非常感谢！

Answer 1

您可以使用<marker>元素在折线的每个顶点放置一个符号。这具有以下优点：符号可以自动地与路径方向对齐。但是，您仍然需要自己放置每个顶点。我不认为有任何方法可以在路径上以固定间隔自动重复符号。

＆＃13;

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

＆＃13;

SVG沿路径重复对象或符号

1 个答案: