SVGMarkerElement: orientAngle 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 orientAngle read-only property of the SVGMarkerElement interface returns an SVGAnimatedAngle object containing the angle of the orient attribute.
Value
An SVGAnimatedAngle object. The baseVal property of this object returns an SVGAngle, the value of which returns the angle.
Examples
The orientAngle property returns an SVGAnimatedAngle which contains an SVGAngle with the angle set by the orient attribute as a number representing the number of degrees the marker is turned.
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=".5turn">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
</svg>
js
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // 180 as .5turn is 180deg.
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGMarkerElement__orientAngle |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
orientAngle
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support