SVGMarkerElement

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.

Properties

This interface also inherits properties from its parent, SVGElement.

SVGMarkerElement.markerUnitsRead 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.markerWidthRead only

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

SVGMarkerElement.markerHeightRead only

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

SVGMarkerElement.orientTypeRead 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.orientAngleRead only

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

SVGMarkerElement.refXRead only

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

SVGMarkerElement.refYRead only

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

SVGMarkerElement.viewBoxRead only

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

SVGMarkerElement.preserveAspectRatioRead only

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

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.

<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

Browser compatibility