Question

我有这个动画设置来指示选择了哪个SVG。动画在svg:use元素中添加animateTransform元素和3个动画或svg:use元素。感谢这里的一些很好的帮助，我能够正常工作。

然而，我的新问题是动画只能按原设计一次。如果选择了第二个元素，动画似乎会尝试发生，因为您可以看到笔画宽度增加，但是音阶没有发生。

我认为通过使用setTimeout调用函数并在动画完成后删除svg:use，这将是一个简单的修复。我没那么幸运。

我的问题的一个例子可以在这里看到：http://codepen.io/JoeyCinAZ/pen/GHhbw

我写的删除动画的功能是

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

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

Answer 1

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

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

严格来说无效，Firefox拒绝它。我相信有计划改变SVG规范以匹配Chrome的宽松行为，但在此之前将其写为

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

其次，您的主要问题是，一旦您运行动画，文档时间轴将从0到5.5秒（这是您的所有动画需要多长时间）。下次创建动画时，文档时间轴因此为5.5秒，并且初始动画不会运行，因为它在过去，因为它应该从0开始。您可以通过

解决这个问题

a）调用setCurrentTime将时间轴重置为0或

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

Answer 2

之前我遇到过类似的问题，并通过完全删除包含生成的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动画仅适用一次

2 个答案: