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("", "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
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/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
Share Improve this question edited May 23, 2017 at 12:08 CommunityBot 11 silver badge asked Oct 22, 2013 at 6:14 LovelineLoveline 231 silver badge3 bronze badges3 Answers
Reset to default 5This 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
Are you testing in Chrome perhaps? Note that animation onbegin
and onend
events are not working in Webkit/Blink:
https://code.google./p/chromium/issues/detail?id=116595
Your code as written works fine for me in FF: http://jsfiddle/k5wfH/1/
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./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/wXkC5/2/ So it may depend on if you need to just do more animation, or some other js code.