Saturday, April 23, 2011

SVG Animation and The SVG DOM beginElement() Method

This example attempts to restart the animation using the SVG DOM beginElement() method. It keeps the bubble going back and forth along a zig-zag path.  It restarts the animation once the bubble has returned to the start position by using beginElement ( ) upon the original <animateMotion>.  The following SVG code is just the XML necessary to show the beginElement ( ) method call.

http://rsasandbox.appspot.com/beginElement-ex.svg










Note: If the example animation does not restart after one complete circuit it means that your browser (like Chrome) doesn't yet support the SVG DOM beginElement ( ) method.  The animation should restart properly in the Opera browser.
<script type="text/javascript" >
<![CDATA[
      function BeginAgain(bubble) {
          var bub = SVGDocument.getElementById(bubble);
          bub.beginElement();
      }
]]>
</script>
...
<animateMotion  id="bubble1am1" ...  >
...
<animateMotion  id="bubble2am1"
     begin="bubble1am1.end"
     ...
     onend="BeginAgain('bubble1am1')" >

4 comments:

  1. Does this still not work in Chrome? I've written a pretty extensive animation in SVG that works great in Firefox (and, curiously, the iOS version of Safari), but it doesn't work in OSX Safari and in Google chrome.

    ReplyDelete
    Replies
    1. I don't think that I've tried this in a recent version of the Chrome Beta, but it still doesn't work under Version 24.0.1312.52 beta.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. bub.beginElement();
    this is work on chrome and firefox very well but
    this is not supported in IE10 browser then what we use that will run on IE10
    how to achieve this issue

    ReplyDelete