SVG <discard>用法及代碼示例

<discard> SVG 元素允許作者指定丟棄特定元素的時間，從而減少 SVG 用戶代理所需的資源。這對於幫助 SVG 查看器在顯示 long-running 文檔時節省內存特別有用。

執行：

寬度和高度表示將發生動畫的畫布區域。

<svg width="1000" height="1000">

cx代表X軸，cy代表Y軸，r代表顏色，fill代表圓內顏色。

<circle id="circle2" cx="100" cy="300"  r="190" fill="green"

begin 屬性定義動畫何時開始或何時應丟棄元素。

<discard> 元素可能出現在<animate> 元素可能出現的任何位置。允許開發人員指定丟棄特定元素的時間。

animateTransform 元素在其目標元素上設置變換屬性的動畫，從而允許動畫控製平移、縮放、旋轉和/或傾斜。

SVG <animateMotion> 元素提供了一種定義元素如何沿著運動路徑移動的方法。

示例 1：在一點上旋轉圓。

HTML


<!DOCTYPE html> 
<html> 
<head> 
    <title>GeeksForGeeks-Discard</title> 
</head> 
<body> 
    <svg width="800" height="600"> 
        <circle id="circle2" cx="400" cy="300" r="100" 
            fill="none" stroke="green" stroke-width="70"
            stroke-dasharray="15 15"> 
            <animateTransform attributeName="transform" 
                type="rotate" begin="1s" dur="10s" 
                from="0 400 300"
                to="-720 400 300"/> 
            <discard begin="2s"/> 
        </circle> 
    </svg> 
</body> 
</html>

輸出：

示例 2：在畫布周圍的實心圓圈中旋轉。

HTML


<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>GeeksForGeeks-Discard</title> 
</head> 
<body> 
    <svg width="1000" height="1000"> 
        <circle id="circle2" cx="100" cy="300" r="190" 
            fill="green" stroke="green" stroke-width="70"
            stroke-dasharray="3 3"> 
            <animateTransform attributeName="transform" 
                type="rotate" begin="1s" dur="10s" 
                from="0 400 300"
                to="-720 400 300"/> 
            <discard begin="5s"/> 
        </circle> 
    </svg> 
</body> 
</html>

輸出：

支持的瀏覽器：此 SVG 元素支持以下瀏覽器：

Chrome
Edge
Firefox
IE瀏覽器
Safari
Opera

相關用法

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