W3cubDocs

/Web APIs

SVGTransform: setRotate() method

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 setRotate() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_ROTATE, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.

Syntax

setRotate(angle, cx, cy)

Parameters

angle

A float defining the rotation angle in degrees.

cx Optional

A float defining the X-coordinate of the center of rotation. Defaults to 0.

cy Optional

A float defining the Y-coordinate of the center of rotation. Defaults to 0.

Return value

None (undefined).

Exceptions

NoModificationAllowedError DOMException

Thrown if the attribute or the SVGTransform object is read-only.

Examples

>

Rotating an SVG Element

// Select an SVG element and create a transform object
const svgElement = document.querySelector("svg");
const transform = svgElement.createSVGTransform();

// Set a rotation of 45 degrees
transform.setRotate(45, 0, 0);

// Output the rotation angle
console.log(`Rotation Angle: ${transform.angle}`); // Output: 45

Specifications

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
setRotate 1 12 1.5 ≤12.1 4 18 4 ≤12.1 3.2 1.0 4.4 3.2

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/SVGTransform/setRotate