Question

尝试使用JavaScript移动SVG元素以进行互动游戏；

<!DOCTYPE html>
<html>
    <body>
        <svg width="300" height="300">
            <circle id="circ" cx="50" cy="50" r="40"   fill="black" ></circle>
            <animateTransform xlink:href="#circ" attributeName="transform" attributeType="XML" type="translate" from="50 50" to="200 200" dur="1s" repeatCount="1"></animateTransform>
        </svg> 
    </body>
</html>

但是，元素在动画之后会放回到其原始位置。

有什么建议可以让元素保持在新位置？

Answer 1

如果要在动画结束后应用最终的动画状态，请添加fill =“冻结”。

<!DOCTYPE html>
<html>
<body>

    <svg width="300" height="300">
       <circle id="circ" cx="50" cy="50" r="40"   fill="black" >
       </circle>

       <animateTransform xlink:href="#circ" attributeName="transform" attributeType="XML" type="translate" from="50 50" to="200 200" dur="1s" repeatCount="1" fill="freeze"></animateTransform>
    </svg> 

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<body>

    <svg width="300" height="300">
       <circle id="circ" cx="50" cy="50" r="40"   fill="black" >
       </circle>

       <animateTransform xlink:href="#circ" attributeName="transform" attributeType="XML" type="translate" from="50 50" to="200 200" dur="1s" repeatCount="1" fill="freeze" ></animateTransform>
    </svg> 

</body>
</html>

您只需要使用填充冻结即可。

SVG animateTransform与href

2 个答案: