rotate
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 rotate attribute specifies how the animated element rotates as it travels along a path specified in an <animateMotion> element.
You can use this attribute with the following SVG elements:
Usage notes
| Value |
auto | auto-reverse |
<number>
|
|---|---|
| Default value | 0 |
| Animatable | No |
The auto and auto-reverse values allow the animated element's rotation to change dynamically as it travels along the path. If the value of rotate is auto, the element turns to align its right-hand side in the current direction of motion. If the value is auto-reverse, it turns its left-hand side in the current direction of motion.
Setting rotate's value to a number specifies a constant rotation, in degrees, that does not change with the animation. The default value of 0 keeps the animated element in its original orientation.
Examples
SVG
<svg
width="400"
height="120"
viewBox="0 0 480 120"
xmlns="http://www.w3.org/2000/svg">
<!-- Draw the outline of the motion path in grey -->
<path
d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey"
stroke-width="2"
fill="none"
id="theMotionPath" />
<!-- Red arrow which will not rotate -->
<path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="0">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
<g transform="translate(100, 0)">
<use href="#theMotionPath" />
<!-- Green arrow which will rotate along the motion path -->
<path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
</g>
<g transform="translate(200, 0)">
<use href="#theMotionPath" />
<!-- Blue arrow which will rotate backwards along the motion path -->
<path fill="blue" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
</g>
<g transform="translate(300, 0)">
<use href="#theMotionPath" />
<!-- Purple arrow which will have a static rotation of 210 degrees -->
<path fill="purple" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="210">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
</g>
</svg>
Result
Specifications
This feature does not appear to be defined in any specification.Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
rotate
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support