SVG trigger animation with event

by

Here’s an article that covers what you need:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/

Edit: link is removed. Archived copies:

In short:

  1. Create the <animation> with begin="indefinite" so that it won’t treat the animation as starting on document load. You can do this either via JavaScript or raw SVG source.

  2. Call beginElement() on the SVGAnimationElement instance (the <animate> element) when you’re ready for the animation to start. For your use case, use a standard addEventListener() callback to invoke this method when you’re ready, e.g.

    myAnimationElement.addEventListener('mySpecialEvent',function(){
  myAnimationElement.beginElement();
},false);

More Related Contents:

  1. How to draw a vector path progressively? (Raphael.js)
  2. Can’t make paths draw growing slowly with D3
  3. Why are inline event handler attributes a bad idea in modern semantic HTML?
  4. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  5. phantomjs not waiting for “full” page load
  6. Launch Bootstrap Modal on Page Load
  7. Javascript event handler with parameters
  8. Getting value of HTML Checkbox from onclick/onchange events
  9. How do I re-trigger a WebKit CSS animation via JavaScript?
  10. How to check if an embedded SVG document is loaded in an html page?
  11. Watch multiple $scope attributes
  12. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  13. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  14. Javascript: How to detect if a word is highlighted
  15. How can I execute a function on pressing the enter key in an field?
  16. How can I listen for a click-and-hold in jQuery?
  17. How do you detect the clearing of a “search” HTML5 input?
  18. JS Events: hooking on value change event on text inputs
  19. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  20. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  21. How can I get png(base64) with images inside of svg in Google Charts?
  22. jQuery events .load(), .ready(), .unload()
  23. Detect if user clicks inside a circle
  24. Backbone 0.9.9: Difference between listenTo and on
  25. Prevent onclick action with jQuery
  26. Creating SVG graphics using Javascript?
  27. Accessing a DOM object defined in an external SVG file
  28. Dynamically created SVG elements are not rendered by the browser
  29. Add multiple window.onload events
  30. disable Bootstrap’s Collapse open/close animation [duplicate]

Leave a Comment