Search code examples
javascriptsvgsvg-animate

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

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

Solution

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