SVG repeatCount Attribute
Last Updated :
31 Mar, 2022
The repeatCount attribute specifies the time duration of an animation. The elements that are using this attribute includes <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>
Syntax:
repeatCount = number || indefinite
Attribute Values: The repeatCount attribute accepts the values mentioned above and described below.
- number: It indicates the number of iterations. The values starts greater than 0 and beyond.
- indefinite: It specifies that the animation will repeat indefinitely.
Example 1: The below examples illustrates the use of the repeatCount attribute.
HTML
<!DOCTYPE html>
<html>
<body>
<div style="color: green;
text-align: center;">
<h1>GeeksforGeeks</h1>
<h4>It will stop after 6 sec.</h4>
<svg viewBox="0 0 620 150"
<rect x="260" y="0" fill="green"
width="100" height="100">
<animate attributeType="XML"
attributeName="y" from="0"
to="50" dur="1s" repeatCount="6" />
</rect>
</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="0 0 620 150"
<rect x="260" y="0" fill="green"
width="100" height="100">
<animate attributeType="XML"
attributeName="y" from="0"
to="50" dur="1s"
repeatCount="indefinite" />
</rect>
</svg>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...