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.

Instance properties

This interface also inherits properties from its parent, SVGElement.

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

• markerWidth Read only

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

• markerHeight Read only

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

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

• orient

  • : A string defining how the marker is rotated when it is placed at its position on the shape. It reflects the orient attribute of the <marker> element.

• orientAngle Read only

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

• refX Read only

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

• refY Read only

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

• viewBox Read only

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

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

• setOrientToAuto()
  • : Sets the value of the orient attribute to auto.
• 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 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