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

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