Skip to content
Related Articles

Related Articles

Improve Article

SVG repeatCount attribute

  • Last Updated : 18 Nov, 2020

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" 
            xmlns="http://www.w3.org/2000/svg">
              
            <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" 
            xmlns="http://www.w3.org/2000/svg">
              
            <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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :