W3cubDocs

/SVG

<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.

<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

<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.

<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

Global attributes

Core Attributes

Most notably: id, tabindex

Styling Attributes
class, style
Conditional Processing Attributes

Most notably: requiredExtensions, systemLanguage

Presentation Attributes

Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

ARIA Attributes

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
marker 1 12 1.5 9 9 3 3 Yes 4 Yes 3 Yes
markerHeight Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
markerUnits Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
markerWidth Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
orient Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
refX Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
refY Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
viewBox Yes 12 Yes 9 Yes Yes Yes Yes Yes Yes Yes Yes

See also

© 2005–2023 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