1. Web
  2. Web APIs
  3. SVGMarkerElement
  4. markerUnits

SVGMarkerElement: markerUnits property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The markerUnits read-only property of the SVGMarkerElement interface returns an SVGAnimatedEnumeration object. This object returns an integer which represents the keyword values that the markerUnits attribute accepts.

Value

An SVGAnimatedEnumeration object. The baseVal property of this object contains one of the following values:

0

SVG_MARKERUNITS_UNKNOWN which means that the markerUnits attribute has a value other than the two predefined keywords.

1

SVG_MARKERUNITS_USERSPACEONUSE which means that the markerUnits attribute has the keyword value userSpaceOnUse.

2

SVG_MARKERUNITS_STROKEWIDTH which means that the markerUnits attribute has the keyword value strokeWidth.

Examples

The markerUnits property returns an SVGAnimatedEnumeration object that contains the value of the markerUnits attribute.

html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse"
      markerUnits="strokeWidth">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
js
let marker = document.getElementById("arrow");
console.log(marker.markerUnits.baseVal); // 2

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGMarkerElement__markerUnits

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content