Markers on Lines and Paths

A <marker> is a small drawing stamped on a shape's vertices by marker-start, marker-mid and marker-end. It has its own viewBox; refX, refY pick the point placed on the vertex, and markerWidth, markerHeight size it in stroke widths. orient="auto" turns it along the line, and auto-start-reverse flips the start marker so one arrowhead serves both ends.

Arrowheads and dot markersHTMLLive

<svg width="600" height="100" fill="none" stroke-width="3">
  <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="4" markerHeight="4"
          orient="auto-start-reverse">
    <path d="M0 0 L10 5 L0 10 Z" style="fill:#263238; fill:context-stroke"/></marker>
  <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="3" markerHeight="3">
    <circle cx="5" cy="5" r="4" fill="#fff" stroke="#1f5f8b" stroke-width="2"/></marker>
  <line x1="20" y1="80" x2="180" y2="20" stroke="#b5452f" marker-end="url(#arrow)"/>
  <path d="M230 50 C 270 -10, 320 110, 360 50" stroke="#5b3f99"
        marker-start="url(#arrow)" marker-end="url(#arrow)"/>
  <polyline points="400,40 440,70 480,20 520,90 560,50" stroke="#1f5f8b"
            marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)"/>
</svg>

Browser output of 7

context-stroke paints the arrowhead in the color of the line using it, so one marker serves red and purple. Chrome 124 1 + and Firefox 111 555 + support it; Safari 10 drops that declaration and keeps the dark fallback before it.

MENU