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:
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:
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.
<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>
Specification |
---|
SVG Animations Level 2 # RotateAttribute |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rotate