<marker>

The <marker> element defines a graphic used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element.

Markers can be attached to shapes using the marker-start, marker-mid, and marker-end properties.

Examples

Drawing arrowheads

The following example shows how to draw an arrowhead on a line and on a curved path. For the curved path, an arrowhead is drawn at each point with a marker-mid marker.

html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- A marker to be used as an arrowhead -->
    <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>
  </defs>

  <!-- A line with a marker -->
  <line
    x1="10"
    y1="10"
    x2="90"
    y2="90"
    stroke="black"
    marker-end="url(#arrow)" />

  <!-- A curved path with markers -->
  <path
    d="M 110 10
       C 120 20, 130 20, 140 10
       C 150 0, 160 0, 170 10
       C 180 20, 190 20, 200 10"
    stroke="black"
    fill="none"
    marker-start="url(#arrow)"
    marker-mid="url(#arrow)"
    marker-end="url(#arrow)" />
</svg>

Drawing polymarkers

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <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>

    <!-- 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 an arrowhead in both directions -->
  <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>

Using context fill and stroke

The following example shows how to use the context-fill and context-stroke values to make a marker use the same fill and stroke as the shape it is attached to.

html
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <marker
    id="circle"
    markerWidth="6"
    markerHeight="6"
    refX="3"
    refY="3"
    markerUnits="strokeWidth">
    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
  </marker>

  <style>
    path {
      marker: url(#circle);
    }
  </style>

  <path d="M 10,10 30,10 h 10" stroke="black" />
  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>

Attributes

markerHeight

This attribute defines the height of the marker viewport. Value type: <length> ; Default value: 3; Animatable: yes

markerUnits

This attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the <marker>. Value type: userSpaceOnUse|strokeWidth ; Default value: strokeWidth; Animatable: yes

markerWidth

This attribute defines the width of the marker viewport. Value type: <length> ; Default value: 3; Animatable: yes

orient

This attribute defines the orientation of the marker relative to the shape it is attached to. Value type: auto|auto-start-reverse|<angle> ; Default value: 0; Animatable: yes

preserveAspectRatio

This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes

refX

This attribute defines the x coordinate for the reference point of the marker. Value type: left|center|right|<coordinate> ; Default value: 0; Animatable: yes

refY

This attribute defines the y coordinate for the reference point of the marker. Value type: top|center|bottom|<coordinate> ; Default value: 0; Animatable: yes

viewBox

This attribute defines the bound of the SVG viewport for the current SVG fragment. Value type: <list-of-numbers> ; Default value: none; Animatable: yes

Usage context

Categories Container element
Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# MarkerElement

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
marker 1 12 1.5 9 3 18 4 14 2 1.0 3
markerHeight 1 12 1.5 15 3 18 4 14 2 1.0 4.4
markerUnits 1 12 1.5 15 3 18 4 14 2 1.0 4.4
markerWidth 1 12 1.5 15 3 18 4 14 2 1.0 4.4
orient 1 12 1.5 15 3 18 4 14 2 1.0 4.4
refX 1 12 1.5 15 3 18 4 14 2 1.0 4.4
refY 1 12 1.5 15 3 18 4 14 2 1.0 4.4
viewBox 1 12 1.5 15 3 18 4 14 2 1.0 4.4

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker