How to place multiple evenly-spaced arrowheads along an SVG line?

In SVG, to place multiple equidistant arrows along a path, follow these steps:

1. Define the Arrowhead Marker

First, define an arrow shape in SVG using the <marker> tag. This tag specifies a shape that can be referenced to draw at the start, middle, or end of a path.

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>

In this example, the arrow shape is a simple triangle.

2. Create the SVG Path

After defining the arrow, create a path (using the <path> tag) along which the arrows will be placed.

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

Here, the path starts at point (10, 10), passes through the control point (150, 50), and ends at point (300, 10).

3. Place Arrows Along the Path

To position arrows equidistantly along the path, use the <use> tag to reuse the arrow defined by the <marker> tag, and control the spacing between arrows using the stroke-dasharray attribute.

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

Here, stroke-dasharray="1, 30" indicates a segment of length 1 followed by 30 units of blank space along the path. This configuration ensures the arrows are evenly distributed along the path.

Practical Example

Combining all components, you get a complete SVG example where arrows are evenly distributed along a quadratic Bézier curve:

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>

This SVG displays a quadratic Bézier curve from (10, 10) to (300, 10) with multiple red arrows evenly spaced along it. This approach is flexible; adjust stroke-dasharray to control arrow count and spacing, adapting to various design needs.