通过 Javascript DOM 完成时未调用 SVG 动画元素的 endEvent 的处理程序

Question

我正在通过 Javascript DOM 使用 HTML5 SVG 构建图形。

我使用动画沿其 x 坐标（y 常数）移动一个 svg 元素（即主 svg 元素的子元素）。

var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
animate.id = i;
animate.setAttribute('attributeName','x');
animate.setAttribute('begin','indefinite');
animate.setAttribute('dur','1s');
animate.setAttribute('fill','freeze');
animate.addEventListener('endEvent',animationEnd,false);
svgChild.appendChild(animate);

稍后我通过svg元素访问动画元素，并开始动画

svgChild.firstChild.setAttribute('from',xFrom);
svgChild.firstChild.setAttribute('to',xTo);
svgChild.firstChild.beginElement()

到目前为止一切正常。

但在动画结束时，为其注册的处理程序不会被调用。

我也尝试了以下方法，但这也没有用。

animate.setAttribute('end',animationEnd);

我在通过 Javascript DOM 构建 SVG 的论坛上进行了广泛搜索。但是在通过 javascript DOM 注册动画事件属性时找不到任何帮助。

我在这个论坛查到的一些问题

How to add an animated svg via javascript?

Check when an animation has ended in SVG

Answer 1

我就是这样做的。

  ani.setAttributeNS(null,"onend", "console.log('ding.')");
  // ani.addEventListener("onend", "console.log('ding.')", false);  // cannot do it like this - events all happen right away 

Answer 2

您是否在 Chrome 中进行测试？请注意动画onbegin 和onend 事件在Webkit/Blink 中不起作用：

https://code.google.com/p/chromium/issues/detail?id=116595

您编写的代码在 FF 中对我来说很好用：http://jsfiddle.net/k5wfH/1/

Answer 3

我认为某些浏览器中存在错误，因此该示例在 Chrome 上对我不起作用，https://code.google.com/p/chromium/issues/detail?id=269648 中列出的错误可能适用于此？根据您需要做的事情，可能会有一种解决方法。如果您想在第一个动画结束后制作另一个动画，您可以根据第一个动画的结尾绑定另一个动画，如下所示...

  <animateTransform begin="indefinite" additive="sum" fill="none" type="scale" attributeType="XML" attributeName="transform" from="1" to="2" dur="3s" id="animid_1007"></animateTransform>
  <animateTransform begin="animid_1007.end" type="scale" attributeType="XML" attributeName="transform" from="2" to="1" dur="3s"></animateTransform>

所以这里是一个小提琴，显示一些动画在第一个动画结束时将圆圈移回。 http://jsfiddle.net/wXkC5/2/ 所以这可能取决于你是否需要做更多的动画，或者其他一些 js 代码。