SVGTransform: angle property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The angle read-only property of the SVGTransform interface represents the angle of the transformation in degrees.

For SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX, and SVG_TRANSFORM_SKEWY, angle reflects the transformation's rotation or skewing angle.

For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.

Value

An integer; the angle value in degrees as a float.

Examples

Accessing the angle property

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
</svg>
js
const rect = document.getElementById("rect");
const transformList = rect.transform.baseVal;

// Create and add a rotation transform
const rotateTransform = rect.ownerSVGElement.createSVGTransform();
rotateTransform.setRotate(45, 100, 100); // Rotate 45 degrees
transformList.appendItem(rotateTransform);

// Access the angle property
console.log(transformList.getItem(0).angle); // Output: 45

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGTransform__angle

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
angle

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support