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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。