我在带有dur =“ 10s”的SVG动画上使用elt.beginElementAt(-5)
,正常情况下它的工作时间是5s。
但是如果在动画结束时(即在启动elt.beginElementAt(-5)
cmd后5秒钟)我想再次触发它,则不起作用!
我必须等待“真实”持续时间(在本示例中为10s),才能重新启动动画。如果在我的第一个elt.beginElementAt(-5)
命令之后尝试在5s到10s之间尝试什么都不会发生...
那么,如何重置计时器?如何忽略“正常”持续时间?
谢谢。
最佳答案
要使SVG启动和重置功能协同工作,请设置fill属性。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>Scalable Vector Graphics (SVG) - SVG Animations</title>
<!-- Scaffold -->
<style>
/* <![CDATA[ */
body {
margin-left: 100px;
}
svg {
border: 1px solid black;
width: 600px;
height: 400px;
}
svg * {
fill: none;
stroke: #000000;
stroke-width: 1px;
}
/* ]]> */
</style>
<script>
/* <![CDATA[ */
function go() {
var elements = document.getElementsByTagName("animate");
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute("fill", "freeze");
elements[i].beginElement();
}
}
function reset() {
var elements = document.getElementsByTagName("animate");
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute("fill", "remove");
elements[i].endElement();
}
}
/* ]]> */
</script>
</head>
<body>
<h1>Scalable Vector Graphics (SVG) - SVG Animations</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
<rect x="10" y="10" width="100" height="100">
<!-- begin="indefinite" allows us to start the animation from script -->
<animate attributeName="x" begin="indefinite" dur="1s" from="10" to="300" fill="freeze" />
</rect>
</svg>
<button onclick="go();" type="button">Go</button>
<button onclick="reset();" type="reset">Reset</button>
</body>
</html>
关于javascript - 使用beginElementAt()时如何重置SVG动画的计时器?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24494010/