SVG repeatDur属性用法及代码示例

repeatDur属性指定重复动画的总持续时间。

使用此属性的元素是：

<animate>元素
<animateColor>元素
<animateMotion>元素
<animateTransform>元素
<set>元素

用法:

repeatDur = clock-value || indefinite

属性值：repeatDur属性接受上面和下面描述的值：

clock-value:它指示重复动画的持续时间。
indefinite:它指定动画将无限期重复。

下面的示例说明了repeatDur属性的用法。

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

输出：

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

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG repeatDur Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。