SVG rotate Attribute

31 Mar, 2022
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"               xmlns="http://www.w3.org/2000/svg">                 <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"               xmlns="http://www.w3.org/2000/svg">                 <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:
sagar0719kumar
HTML-SVG
SVG-Attribute
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.