SVGMarkerElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The SVGMarkerElement interface provides access to the properties of <marker> elements, as well as methods to manipulate them. The <marker> element defines the graphics used for drawing marks on a shape.

The following properties and methods all return, or act on the attributes of the <marker> element represented by SVGMarkerElement.

Instance properties

This interface also inherits properties from its parent, SVGElement.

SVGMarkerElement.markerUnits Read only

Returns an SVGAnimatedEnumeration object, with 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.

SVGMarkerElement.markerWidth Read only

Returns an SVGAnimatedLength object containing the width of the <marker> viewport.

SVGMarkerElement.markerHeight Read only

Returns an SVGAnimatedLength object containing the height of the <marker> viewport.

SVGMarkerElement.orientType Read only

Returns an SVGAnimatedEnumeration object, with one of the following values:

0: SVG_MARKER_ORIENT_UNKNOWN which means that the orient attribute has a value other than the two predefined keywords.
1: SVG_MARKERUNITS_ORIENT_AUTO which means that the orient attribute has the keyword value auto.
2: SVG_MARKERUNITS_ORIENT_ANGLE which means that the orient attribute has an <angle> or <number> value indicating the angle.

SVGMarkerElement.orientAngle Read only

Returns an SVGAnimatedAngle object containing the angle of the orient attribute.

SVGMarkerElement.refX Read only

Returns an SVGAnimatedLength object containing the value of the refX attribute of the <marker>.

SVGMarkerElement.refY Read only

Returns an SVGAnimatedLength object containing the value of the refY attribute of the <marker>.

SVGMarkerElement.viewBox Read only

Returns an SVGAnimatedRect object containing an SVGRect which contains the values set by the viewBox attribute on the <marker>.

SVGMarkerElement.preserveAspectRatio Read only

Returns an SVGPreserveAspectRatio object which contains the values set by the preserveAspectRatio attribute on the <marker> viewport.

Instance methods

This interface also inherits methods from its parent, SVGElement.

SVGMarkerElement.setOrientToAuto(): Sets the value of the orient attribute to auto.
SVGMarkerElement.setOrientToAngle(): Sets the value of the orient attribute to a specific angle value.

Examples

The following SVG will be referenced in the examples.

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="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>

Finding the Width of the Marker

The markerWidth property returns an SVGAnimatedLength which contains an SVGLength with the value of the markerWidth attribute.

let marker = document.getElementById("arrow");
console.log(marker.markerWidth.baseVal.value); // 6

Updating the Orientation Angle

In the following example the value of the orient attribute is updated using setOrientToAngle() using an SVGAngle created using SVGElement.createSVGAngle().

let svg = document.getElementById("svg");
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
let angle = svg.createSVGAngle();
angle.value = "110";
marker.setOrientToAngle(angle);
console.log(marker.orientAngle.baseVal.value); // new value - 110

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGMarkerElement

Browser compatibility

BCD tables only load in the browser