How Time Is Measured

The animation clock of SVG starts ticking when the SVG has finished loading. When the user leaves the page then it will stop ticking.

There are three ways to specify the beginning or duration for a particular animation segment as a numeric value:

A full clock value is defined in hours, minutes, and seconds just like: (1:20:23).
A partial clock value is defined in minutes and seconds just like: (2:15).
The matrix time value can be defined in h (hours), min (minutes), s (seconds), or ms (milliseconds) just like: dur="5s" begin="2min".

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg xmlns="http://www.javatpoint.org/2000/svg"
xmlns:xlink="http://www.javatpoint.org/1999/xlink">

<circle cx="60" cy="60" r="30" style="fill: blue; fill-opacity: .6; stroke:black;" >
<animate id="p1" attributeName="r" attributeType="XML"
 from="30" to="10" begin="0s" dur="4s"  fill="freeze"/>
</circle>

<circle cx="120" cy="60" r="10" style="fill: red; fill=opacity: .5; stroke: black;">
<animate attributeName="r" attributeType="XML"
 begin="p1.end" dur="4s" from="10" to="30" fill="freeze"/>
</circle>

</svg>
</body>
</html>

Test it Now

end element:

The end element is used for halting an animation. You can set the value according to your requirement.

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width="500" height="500">

<rect x="10" y="10" width="200" height="40"
 style="stroke: black; fill: green; fill-opacity: 0.5;">
<animate attributeName="width" attributeType="XML"
 begin="0s" dur="12s" end="5s"
 from="10" to="200" fill="freeze"/>
</rect>

</svg>
</body>
</html>

Test it Now

Next TopicSVG Repeated Action

← prev next →