Polyfill for animate events on SVG
Clone or download
MAD Merge pull request #4 from nhoizey/patch-1
Removing debugger…
Latest commit 3f96ce4 Jan 11, 2014



A script that let's you use animate events on SVG (beginEvent, endEvent, repeatEvent) in browsers that don't implements them.


MAD - ecrire [at] madsgraphics [dot] com

Follow: @madsgraphics on Twitter for more updates.


Just use the normal addEventListener on your elements, and the script with automagically fallback to the correct event :]

anim = document.getElementById('anim');
anim.addEventListener('endEvent', function(event) {
    p = document.createElement('p');
    t = document.createTextNode('It works!');
}, false);

Any forks and stuff are welcome.



  • Improve the event object to keep it more closer to the FF TimeEvent object
  • Fix delayed start based on the beginning of another animate element (#id.begin)


  • Prevent BeginEvent to launch the EndEvent on previousAnimate if this one doesn't exists
  • Add Package JSON toi ditribute by Bower


  • Restore event.currentTarget pointer


  • More lightweight implementation.
  • Use prototyped beginElement methods for SVGAnimateElement and SVGAnimateTransformElement.
  • Move auto fire events (begin and end) directly in EventListener constructor method instead of determines it when trigger.


  • Update the support of event's animate element : the implementation currently not support event detection using a simple animate['endEvent']? test. We need to create dummy svg element and inject temporarily them to the DOM to make the detection and update a map of supported events :).



  • First implementation. Do not support repeatEvent for the moment.

##Know issues##

None, for the moment \o/…


All of the SVGEventListener specific code is under the WTFPL license. Which means it's also MIT and BSD (or anything you want). However, the inspired works are subject to their own licenses.


Nicolas Hoizey (@nhoizey) - For the initial challenge \o/

Christophe Porteneuve (@porteneuve) - For giving me his passion for javascript.

Jérémie Patonnier (@JeremiePat) - For is indefectible support about SVG and others.