Skip to content
Related Articles

Related Articles

Improve Article

SVG rotate Attribute

  • Last Updated : 18 Nov, 2020

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-revese & 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :