W3cubDocs

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

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

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

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

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 compatibilityUpdate compatibility data on GitHub

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

See also

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