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
Please Login to comment...