Animation using the SVG DOM

Example dom_animate shows a simple animation using the DOM.

f<graphic fig. 1 here>                                            <graphic fig2. here>                                            <graphic fig. 3 here>
Example dom_animate - at zero seconds At zero seconds 	  	Example dom_animate - at three seconds At 2.5 seconds 	  	Example dom_animate - at six seconds At five seconds

The above SVG file contains a 'text' element that says "SVG". The animation loops for 5 seconds. The text string starts out small and transparent and grows to be large and opaque. Here is an explanation of how this example works:

    * A unique 'handler' is declared in the example to handle the 'load' event:

            <handler type="application/ecmascript" ev:event="load">
               init();
            </handler>
            

      Once the document has been fully loaded and processed, this 'handler' invokes the ECMAScript function init().
    * The 'script' element defines the ECMAScript which drives the animation. The init() function is only called once to give a value to global variables textElement and svgRoot and to create and launch an SVGTimer object via the launchTimer() method. showAndGrowElement() sets the transform and fill-opacity attributes on the text element to new values each time it is called.
    * A class of objects (SomeListenerClass) which implement EventListener interface is declared in the global scripting context. An object of this class is then instantiated in the launchTimer() method and given as a parameter of the addEventListener() on the timer object so that the handleEvent() is called each time an 'SVGTimer' event is triggered (the 'someTimer' object is the only target of this event). This way, it is possible to register a listener on a timer object using scripting.
    * Because an 'SVGTimer' event is triggered regularly, showAndGrowElement() is called every 50 milliseconds and changes the text attributes thereby animating the text. showAndGrowElement() checks each time it is invoked whether the maximum duration of the animation has been reached and calls the stop() method on the timer object when this happens, so that the animation stops.

If an attribute/property value is modified while an animation element is animating the same attribute/property, the animations are required to adjust dynamically to the new value.