Open In App

SVG rotate Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads