rotate
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
html
<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
Specification |
---|
SVG Animations Level 2 # RotateAttribute |