W3cubDocs

/Web APIs

SVGTextPositioningElement: rotate 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 rotate read-only property of the SVGTextPositioningElement interface reflects the rotation of individual text glyphs, as specified by the rotate attribute of the given element.

Value

An SVGAnimatedNumberList object.

Examples

Given the following SVG:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20" rotate="45">Hello</text>
  <text x="50" y="50" rotate="90">World</text>
</svg>

We can access the rotate attribute:

const texts = document.querySelectorAll("text");

console.log(texts[0].rotate.baseVal); // output: 45
console.log(texts[1].rotate.baseVal); // output: 90

Specifications

Specification
Scalable Vector Graphics (SVG) 2>
# __svg__SVGTextPositioningElement__rotate>

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
rotate 1 12 1.5 ≤12.1 3 18 4 ≤12.1 1 1.0 3 1

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGTextPositioningElement/rotate