SVG restart屬性用法及代碼示例

restart屬性用於確定動畫是否將重新啟動。該屬性由<animate>，<animateColor>，<animateMotion>，<animateTransform>和<set>元素使用。

用法:

restart="always | whenNotActive | never"

屬性值：該屬性接受上述和以下所述的三個值：

always:它指定可以始終重新啟動動畫。
whenNotActive:它指定動畫僅在不活動時才能重新啟動。如果嘗試在動畫有效期內重新啟動動畫，則將忽略這些嘗試。
never:它指定在加載文檔時無法重新啟動動畫。

以下示例說明了此屬性的用法：

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;"> 
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 520 200" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <rect y="30" x="10" width="60" 
                height="60" fill="green"> 
  
                <animate attributeName="x" 
                    from="10" to="50" dur="1s" 
                    repeatCount="1" 
                    restart="always" /> 
            </rect> 
  
            <a id="geeks" style="cursor:pointer;"> 
                <text style="font-size:10px;" y="10"> 
                    On Clicking here, the 
                    animation will restart 
                </text> 
                <text style="font-size:10px;" y="20"> 
                    even if it is currently 
                    in animation. 
                </text> 
            </a> 
        </svg> 
    </div> 
    <script> 
        document.getElementById("geeks") 
            .addEventListener("click", event => { 
                document.querySelector("animate") 
                    .beginElement(); 
            }); 
    </script> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;"> 
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 520 200" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <rect y="30" x="10" width="60" 
                height="60" fill="green"> 
                  
                <animate attributeName="x" 
                    from="10" to="50" dur="1s" 
                    repeatCount="1" 
                    restart="whenNotActive" /> 
            </rect> 
  
            <a id="geeks" style="cursor:pointer;"> 
                <text style="font-size:10px;" y="10"> 
                    On Clicking here, the 
                    animation will only 
                </text> 
                <text style="font-size:10px;" y="20"> 
                    restart when it is not 
                    currently active. 
                </text> 
            </a> 
        </svg> 
    </div> 
    <script> 
        document.getElementById("geeks") 
            .addEventListener("click", event => { 
                document.querySelector("animate") 
                    .beginElement(); 
            }); 
    </script> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 SVG restart Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。