2

我正在通过 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 注册动画事件属性时找不到任何帮助。

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

如何通过javascript添加动画svg？

检查动画何时在 SVG 中结束

4

3 回答 3

4

我就是这样做的。

  ani.setAttributeNS(null,"onend", "console.log('ding.')");
  // ani.addEventListener("onend", "console.log('ding.')", false);  // cannot do it like this - events all happen right away
于 2014-10-21T16:12:39.237 回答
3

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

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

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

于 2013-10-22T07:28:24.097 回答
0

我认为某些浏览器中存在错误，因此该示例在 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 代码。

于 2013-10-22T10:15:35.690 回答