Open In App

SVG <animateTransform> Element

Improve
Improve
Like Article
Like
Save
Share
Report

SVG stands for Scalable Vector Graphics. It defines vector-based graphics and animation like in HTML Canvas.

The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.

Syntax:

<animateTransform attributeName=''transform''/>

Attribute:

  • from: Initial value of the attribute that will be modified during the animation.
  • to: Final value of the attribute that will be modified during the animation.
  • type: It defines the type of transformation, whose values change over time.
  • dur: Duration of the animation.
  • repeatCount: The number of times an animation will take place.
  • repeatDur: The total duration for repeating an animation.
  • attributeName: The name of the CSS property that is going to be animated.

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="120" height="120">
  
        <polygon points="60,30 90,90 30,90">
            <animateTransform attributeName="transform"
                attributeType="XML" type="rotate" 
                from="0 60 70" to="360 60 70"
                dur="10s" repeatCount="indefinite" />
        </polygon>
    </svg>
</body>
  
</html>



Supported Browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

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