SVG动画丢弃元素

编程问答 2022-12-07

问题描述

帮我弄清楚。 “丢弃”无效。圆圈应该在2秒后消失

  <!DOCTYPE html>
        <html>
            <head> 
                <Meta charset="UTF-8"> 
                <title>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>

解决方法

您可以使用<set begin="2s" attributeName="visibility" to="hidden"/>而不是<discard begin="2s"/>隐藏圆圈。它实际上并没有丢弃圆，但是具有更广泛的兼容性。

<!DOCTYPE html>
        <html>
            <head> 
                <meta charset="UTF-8"> 
                <title>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"/>
                    <set begin="2s" attributeName="visibility" to="hidden"/>
                </circle>   
            </svg>
        </body> 
    </html>