TheSVGMarkerElement 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 bySVGMarkerElement.

Instance properties

This interface also inherits properties from its parent,SVGElement.

SVGMarkerElement.markerUnitsRead only

Returns anSVGAnimatedEnumeration object, with one of the following values:

0

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

1

SVG_MARKERUNITS_USERSPACEONUSE which means that themarkerUnits attribute has the keyword valueuserSpaceOnUse.

2

SVG_MARKERUNITS_STROKEWIDTH which means that themarkerUnits attribute has the keyword valuestrokeWidth.

SVGMarkerElement.markerWidthRead only

Returns anSVGAnimatedLength object containing the width of the<marker> viewport.

SVGMarkerElement.markerHeightRead only

Returns anSVGAnimatedLength object containing the height of the<marker> viewport.

SVGMarkerElement.orientTypeRead only

Returns anSVGAnimatedEnumeration object, with one of the following values:

0

SVG_MARKER_ORIENT_UNKNOWN which means that theorient attribute has a value other than the two predefined keywords.

1

SVG_MARKERUNITS_ORIENT_AUTO which means that theorient attribute has the keyword valueauto.

2

SVG_MARKERUNITS_ORIENT_ANGLE which means that theorient attribute has an<angle> or<number> value indicating the angle.

SVGMarkerElement.orientAngleRead only

Returns anSVGAnimatedAngle object containing the angle of theorient attribute.

SVGMarkerElement.refXRead only

Returns anSVGAnimatedLength object containing the value of therefX attribute of the<marker>.

SVGMarkerElement.refYRead only

Returns anSVGAnimatedLength object containing the value of therefY attribute of the<marker>.

SVGMarkerElement.viewBoxRead only

Returns anSVGAnimatedRect object containing anSVGRect which contains the values set by theviewBox attribute on the<marker>.

SVGMarkerElement.preserveAspectRatioRead only

Returns anSVGPreserveAspectRatio object which contains the values set by thepreserveAspectRatio attribute on the<marker> viewport.

Instance methods

This interface also inherits methods from its parent,SVGElement.

SVGMarkerElement.setOrientToAuto()

Sets the value of theorient attribute toauto.

SVGMarkerElement.setOrientToAngle()

Sets the value of theorient attribute to a specific angle value.

Examples

The following SVG will be referenced in the examples.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <marker           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

ThemarkerWidth property returns anSVGAnimatedLength which contains anSVGLength with the value of themarkerWidth attribute.

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

Updating the Orientation Angle

In the following example the value of theorient attribute is updated usingsetOrientToAngle() using anSVGAngle created usingSVGElement.createSVGAngle().

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

Specifications

Browser compatibility