pelicin › web › SVG

Marker

The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element (MDN).

You attach markers to the shape using the marker-start, marker-mid, and marker-end attributes.

SVG attributes

marker-start

Defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape.

marker-end

Defines the arrowhead or polymarker that will be drawn at the last vertex of the given shape.

marker-mid

Defines the arrowhead or polymarker that will be drawn at all interior vertices of the given shape.

<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-mid -->
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
      <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/>
    </marker>
  </defs>
  <!-- only mark the mid vertices -->
  <polyline
    fill="none" stroke="black"
    points="20,100 40,60 70,80 100,20"
    marker-mid="url(#circle)"
  />
</svg>
| LIVE PREVIEW

SVG elements

<marker>

Defines a shape for drawing arrowheads or polymarkers.

  • markerWidth — width of the marker
  • markerHeight — height of the marker
  • markerUnits — defines the coordinate system for markerWidth, markerHeight, and children of the <marker>; specify userSpaceOnUse (use absolute coordinate) or strokeWidth (default)
  • orient — defines the orientation of the marker relative to the shape it is attached to:
    • auto: orient the marker such that its positive x-axis is pointing to the direction relative to the path
    • auto-start-reverse: like auto, but if the marker is specified as marker-start, then rotate it by 180° (makes the same marker points at opposite direction when specified as marker-start and marker-end)
    • an angle: e.g. 0 (this is the default)
  • refX — defines the x coordinate for the reference point of the marker (think of it as an offset); specify left, center, right, or a coordinate/length (default is 0)
  • refY — defines the y coordinate for the reference point of the marker (think of it as an offset); specify top, center, bottom, or a coordinate/length (default is 0)
  • viewBox — bounds of the SVG viewport, e.g. 0 0 80 20 (see View Box)
  • preserveAspectRatio — defines how to fit the viewport if aspect ratio of the viewBox does not match the given markerWidth and markerHeight, e.g. xMidYMid meet (see preserveAspectRatio)
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <defs>
    <!-- arrowhead marker definition -->
    <marker id="arrow"
      viewBox="0 0 10 10" refX="5" refY="5"
      markerWidth="6" markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
    <!-- simple dot marker definition -->
    <marker id="dot"
      viewBox="0 0 10 10" refX="5" refY="5"
      markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>
  <!-- Coordinate axes with a arrowhead in both direction -->
  <polyline
    points="10,10 10,90 90,90" fill="none" stroke="black"
    marker-start="url(#arrow)" marker-end="url(#arrow)"
  />
  <!-- Data line with polymarkers -->
  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
    marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" 
  />
</svg>
| LIVE PREVIEW

References