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