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:
HTML
<!DOCTYPE html> < html >
< body >
< div style="color: green;
margin-left: 40px;">
< h1 >GeeksforGeeks</ h1 >
< h4 style = "color: black;" >
When rotate = 0 & auto
</ h4 >
< svg width = "400" height = "120"
viewBox = "0 0 380 120"
< path d="M10,110 A120,120 -45 0,
1 110 10 A120,120 -45 0,
1 10,110"
stroke = "green" stroke-width = "2"
fill = "none" id = "geek" />
< path fill = "red"
d = "M-5,-5 L10,0 -5,5 0,0 Z" >
< animateMotion dur = "6s"
repeatCount = "indefinite"
rotate = "0" >
< mpath href = "#geek" />
</ animateMotion >
</ path >
< g transform = "translate(100, 0)" >
< use href = "#geek" />
< path fill = "green"
d = "M-5,-5 L10,0 -5,5 0,0 Z" >
< animateMotion dur = "6s"
repeatCount = "indefinite"
rotate = "auto" >
< mpath href = "#geek" />
</ animateMotion >
</ path >
</ g >
</ svg >
</ div >
</ body >
</ html >
|
Output:
HTML
<!DOCTYPE html> < html >
< body >
< div style="color: green;
margin-left: 40px;">
< h1 >GeeksforGeeks</ h1 >
< h4 style = "color: black;" >
When rotate = auto-reverse & 200
</ h4 >
< svg width = "600" height = "120"
viewBox = "50 0 480 120"
< g >
< path d="M10,110 A120,120 -45 0,
1 110 10 A120,120 -45 0,
1 10,110"
stroke = "green" stroke-width = "2"
fill = "none" id = "geek" />
< path fill = "blue"
d = "M-5,-5 L10,0 -5,5 0,0 Z" >
< animateMotion dur = "6s"
repeatCount = "indefinite"
rotate = "auto-reverse" >
< mpath href = "#geek" />
</ animateMotion >
</ path >
</ g >
< g transform = "translate(100, 0)" >
< path d="M10,110 A120,120 -45 0,
1 110 10 A120,120 -45 0,
1 10,110"
stroke = "green" stroke-width = "2"
fill = "none" id = "geek" />
< path fill = "black"
d = "M-5,-5 L10,0 -5,5 0,0 Z" >
< animateMotion dur = "6s"
repeatCount = "indefinite"
rotate = "200" >
< mpath href = "#geek" />
</ animateMotion >
</ path >
</ g >
</ svg >
</ div >
</ body >
</ html >
|
Output: