SVG <animateTransform> Element

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

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Element