SVG <animate> Element
Last Updated :
16 Jun, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <animate> SVG element is used to animate an attribute or property of an element over time. It’s normally inserted inside the element which we want to animate.
Syntax:
<animate attributeName="" values="" dur="" repeatCount="" />
Attributes:
- Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
- Global Attributes: some global attributes used like core attributes and styling attributes, etc.
Below given are a few examples of the above element:
Example 1:
html
<!DOCTYPE html>
< html >
< body >
< svg viewBox="0 0 50 50">
< rect width="10" height="10" fill="green">
< animate attributeName="rx" values="0;20;0"
dur="2s" repeatCount="10" />
</ rect >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< body >
< h1 style="color:green">
GeeksforGeeks
</ h1 >
< h2 >
SVG animate element
</ h2 >
< svg viewBox="0 0 50 50">
< rect width="7" height="7" fill="green">
< animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="4s" repeatCount="indefinite" />
</ rect >
</ svg >
</ body >
</ html >
|
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome 2 and above
- Edge 79 and above
- Firefox 4 and above
- Safari 4 and above
- Opera 9 and above
- Internet Explorer not supported
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...