SVG marker-start, marker-mid, and marker-end Guide

In Scalable Vector Graphics (SVG), the marker-start, marker-mid, and marker-end attributes attach decorative symbols—such as arrowheads, circles, or custom shapes—to the vertices of graphical elements. This article provides a direct overview of how these attributes reference markers, which SVG elements support them, and the essential configuration parameters inside the referenced <marker> element that define positioning, orientation, and sizing.

The Marker Presentation Attributes

The marker-start, marker-mid, and marker-end attributes apply to path-based SVG elements: <path>, <line>, <polyline>, and <polygon>.

• marker-start: Defines the marker drawn at the first vertex of the shape.
• marker-mid: Defines the marker drawn at all intermediate vertices (every vertex except the first and last).
• marker-end: Defines the marker drawn at the final vertex of the shape.
• marker: A CSS/SVG shorthand property that sets marker-start, marker-mid, and marker-end simultaneously to the same value.

Accepted Attribute Values

Each of these three attributes accepts the following values:

1. none (default): No marker is rendered at the specified vertex.
2. url(#marker-id): A functional URL reference pointing to the unique id of a <marker> element defined within an SVG <defs> block.
3. inherit: Inherits the marker assignment from the parent element.

Key Parameters of the <marker> Element

The attributes on the path simply point to a <marker> element; the actual behavior, dimension, and alignment are configured using the attributes of the <marker> tag itself.

1. refX and refY

• Type: Coordinate (number or percentage).
• Default: 0, 0
• Function: Sets the anchor point of the marker coordinate system that aligns directly with the path’s vertex. For example, setting refX="5" and refY="5" centers a 10x10 marker directly on the path vertex.

2. markerWidth and markerHeight

• Type: Length (number or unit identifier).
• Default: 3
• Function: Defines the width and height of the viewport into which the marker is drawn.

3. markerUnits

• Values: strokeWidth | userSpaceOnUse
• Default: strokeWidth
• Function:
  • strokeWidth: Scales the marker dimensions proportionally with the stroke-width of the path referencing it.
  • userSpaceOnUse: Keeps the marker at a fixed size based on the current SVG coordinate system, regardless of the path’s stroke width.

4. orient

• Values: auto | auto-start-reverse | <angle> (e.g., 90deg, 1.5rad)
• Default: 0 (degrees)
• Function:
  • auto: Rotates the marker automatically to match the direction/tangent of the path at the vertex.
  • auto-start-reverse: Similar to auto, but rotates the marker 180 degrees if placed using marker-start, allowing a single arrowhead definition to work for both the start and end of a line.
  • <angle>: Fixes the marker at a static rotation angle regardless of the path direction.

5. viewBox and preserveAspectRatio

• viewBox: Defines the internal coordinate space for the graphic elements inside the marker (e.g., viewBox="0 0 10 10").
• preserveAspectRatio: Dictates how the marker graphics scale if the aspect ratio of the viewBox does not match markerWidth and markerHeight.