如何沿SVG线放置多个等距箭头？

在SVG中，要沿着一条路径放置多个等距的箭头，可以使用以下几个步骤来实现：

1. 定义箭头标记（Arrowhead Marker）

首先，我们需要在SVG中定义一个箭头形状，这可以通过<marker>标签来完成。<marker>标签定义了一种形状，可以被引用来在路径的开始、中间或结束处绘制。

xml
<svg>
    <defs>
        <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3"
            orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L0,6 L9,3 z" fill="#f00"/>
        </marker>
    </defs>
</svg>

在这个例子中，箭头的形状是一个简单的三角形。

2. 创建SVG路径

定义好箭头后，接下来需要一个路径（<path>标签），箭头将沿此路径排列。

xml
<path id="path1" d="M10 10 Q 150 50 300 10" stroke="black" fill="transparent"/>

这里，路径从点 (10, 10) 开始，通过控制点 (150, 50) 到点 (300, 10)。

3. 沿路径放置箭头

要沿着路径等距放置箭头，可以使用 <use> 标签复用 <marker> 标签定义的箭头，并通过 stroke-dasharray 属性控制箭头间的间隔。

xml
<path id="path1" d="M10 10 Q 150 50 300 10" stroke="black" fill="transparent"
      stroke-dasharray="1, 30" marker-end="url(#arrow)" />

在这里，stroke-dasharray="1, 30" 意味着路径上有一个点和30个单位的空白。这样设置可以让箭头沿路径均匀分布。

实际例子

将以上所有组件合起来，我们可以得到一个完整的SVG示例，其中箭头沿着一条二次贝塞尔曲线均匀分布：

xml
<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3"
                orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L0,6 L9,3 z" fill="#f00"/>
        </marker>
    </defs>
    <path d="M10 10 Q 150 50 300 10" stroke="black" fill="transparent"
          stroke-dasharray="1, 30" marker-end="url(#arrow)" />
</svg>

这个SVG会显示一个从 (10, 10) 到 (300, 10) 的二次贝塞尔曲线，并且沿着这条曲线有多个红色箭头均匀分布。这种方法是很灵活的，可以通过调整 stroke-dasharray 来控制箭头的数量和间距，以适应不同的设计需求。