Javascript 动态SVG动画只工作一次

我使用此动画设置来指示选择了哪个

SVG

。动画在

svg:use

元素中添加了一个

svg:use

元素和3个animate or

animateTransform

元素。多亏了这里的一些帮助，我才得以正常工作

然而，我的新问题是，动画只会像设计的那样工作一次。如果选择了第二个元素，则动画将尝试进行，因为您可以看到笔划宽度增加，但缩放不会发生

我认为这是一个简单的修复方法，使用

setTimeout

调用函数并在动画完成后删除

svg:use

。我没那么幸运

我的问题的一个例子可以在这里看到：

我写的删除动画的函数在这里

setTimeout( function() {removeAnimation(objID)}, 5000);

function removeAnimation(objID) {
    var useEl = document.getElementById(objID);
    useEl.nextSibling.remove();
}

---

我以前也遇到过类似的问题，解决方法是完全删除包含生成的SVG的元素的内容，然后在空元素中重新加载新的SVG

与其使用

setTimeout

，这会让整个事情变得有点奇怪，我只需单击元素选择器即可调用它：

var elem = document.getElementById('myElementSelector');

elem.addEventListener('click', function() {  
   document.getElementById(surroundingElementID).innerHTML = "";
   //Check what has been clicked and call function that creates the SVG on the surroundingElementID
}, false);

---

动画中有两个问题。最简单的是持续时间，它不能按照SVG规范以一个开始。所以

 flash.setAttributeNS(null, 'dur', '.5s');

严格来说是无效的，Firefox拒绝接受。我相信有计划更改SVG规范以匹配Chrome的宽松行为，但在这之前，请将其编写为

 flash.setAttributeNS(null, 'dur', '0.5s');

其次，您的主要问题是，一旦运行动画，文档时间线将从0秒变为5.5秒（这是所有动画所需的时间）。因此，下次创建动画时，文档时间线为5.5秒，初始动画不会运行，因为它在过去，因为它应该从0开始。你可以通过以下两种方法来解决这个问题

a） 调用以将时间线重置为0，或

---

b） 从按钮按下事件触发初始动画。

是否有任何错误？此外，还应该删除anony函数：

setTimeout（removeAnimation.bind（this，objID），5000）否，未记录任何错误。你是说用你评论中的匿名函数替换匿名函数吗？是的，这是一种更干净的方法来做同样的事情罗伯特，你对SVG的了解是惊人的。非常感谢。我使用了setCurrentTime方法，现在运行非常顺利。