gpt4 book ai didi

javascript - 带 href 的 SVG animateTransform

转载 作者:行者123 更新时间:2023-12-01 01:53:45 26 4
gpt4 key购买 nike

尝试使用 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>

但是,动画结束后该元素会返回到其原始位置。

有什么建议可以使元素保持在新位置吗?.

最佳答案

添加fill如果您希望在动画结束后应用最终动画状态,请设置为“freeze”。

<!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>

关于javascript - 带 href 的 SVG animateTransform,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51212614/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com