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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。