VOOZH about

URL: https://www.geeksforgeeks.org/html/svg-rotate-attribute/

⇱ SVG rotate Attribute - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

SVG rotate Attribute

Last Updated : 23 Jul, 2025

The rotate attribute shows the rotation of an animated element as it travels along a specified path in an <animateMotion> element.

Syntax:

rotate = auto | auto-reverse | number

Attribute Values:

The rotate attribute accepts the values mentioned above and described below:

  • auto: This value allows the animated element's rotation to change dynamically as it travels along the path. In this, the element aligns itself to its right-hand side in the current direction of motion.
  • auto-reverse: This value allows the animated element's rotation to change dynamically as it travels along the path. In this, the element aligns itself to its left-hand side in the current direction of motion.
  • number: This value shows a constant rotation, that does not change with the animation.

The Below examples illustrate the use of the rotate attribute.

Example 1:

Output:

Example 2:

Output:

Comment