Handler for endEvent of SVG animate element not invoked when done via Javascript DOM

Question

I am building graphics using HTML5 SVG, via Javascript DOM.

I use the animate to move a svg element(that is a child of main svg element) along its x coordinates (y constant).

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);

Later point I acccess the animate element via svg element, and start animation

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

Everything works perfectly fine till here.

But at the end of the animation, the handler registered for the same is not invoked.

I also tried the following way, but this didn't wotk either.

animate.setAttribute('end',animationEnd);

I have extensively searched on forums building SVG via Javascript DOM. But couldn't find any help on registering to animate event attributes via javascript DOM.

Some of the questions I checked in this forum

How to add an animated svg via javascript?

Check when an animation has ended in SVG

Answer 1

Are you testing in Chrome perhaps? Note that animation onbegin and onend events are not working in Webkit/Blink:

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

Your code as written works fine for me in FF: http://jsfiddle.net/k5wfH/1/

Answer 2

This is how I did it.

  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 3

I think there is a bug in some browsers, so the example doesn't work for me on Chrome, bug listed at https://code.google.com/p/chromium/issues/detail?id=269648 which maybe applies here ? Depending on what you need to do, there could be a workaround. If you wanted another animation after the end of the first, you could tie another animation based on the end of the first, like follows...

  <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>

So a fiddle here, showing some animation moving the circle back on the end of the first animation. http://jsfiddle.net/wXkC5/2/ So it may depend on if you need to just do more animation, or some other js code.