SVG repeatDur Attribute
Last Updated :
31 Mar, 2022
The repeatDur attribute specifies the total duration to repeat the animation.
The elements that uses this attribute are:
- <animate> element
- <animateColor> element
- <animateMotion> element
- <animateTransform> element
- <set> element
Syntax:
repeatDur = clock-value || indefinite
Attribute Values: The repeatDur attribute accepts the values mentioned above and described below:
- clock-value: It indicates the time duration to repeat the animation.
- indefinite: It specifies that the animation will repeat indefinitely.
The below examples illustrate the use of the repeatDur attribute.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< div style="color: green;
text-align: center;">
< h1 >
GeeksforGeeks
</ h1 >
< h4 >
It will stop
after 4 sec.
</ h4 >
< svg viewBox = "-360 0 820 150"
< circle cx = "50" cy = "50" r = '20'
fill = "green" >
< animate attributeName = "cy"
from = "10" to = "50"
dur = "1s" repeatDur = "4s" />
</ circle >
</ svg >
</ div >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< div style="color: green;
text-align: center;">
< h1 >
GeeksforGeeks
</ h1 >
< h4 >
It will continue to animate
</ h4 >
< svg viewBox = "-360 0 820 150"
< rect y = "0" width = "100"
fill = "green" height = "100" >
< animate attributeName = "y"
from = "0" to = "40"
dur = "1s"
repeatDur = "indefinite" />
</ rect >
</ svg >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...