main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda


Example for declarative animation

After loading, the animation is started. It is composed of simple animations like scaling, translation or modifications on opacity. Note that these are done in a "declarative" way, that means that no scripting is involved in. All those animations, and many more, are part of the SMIL specification and referenced in the SVG specification. The SMIL animation was slightly extended to better meet the SVG requirements.

This animation is part of an early atlas project: OECD-Atlas Prototype

Files used

Right-click, save ...

Technical Details

Note: the starting lines of the concerned SVG-file are filled with definition for the embedded fonts, you are not looking at an MPEG-file!


The timed moving of elements is easy: first the element needs to be defined:
<g id="oecd-txt">
  <text>Organization ....</text>

Inside of the group or the element to be animated are placed the directives for our animation:

  <animateMotion dur="3s" begin="4s"
                    repeatCount="1" fill="freeze" path="M0,0h900"/>

Start, duration, number of loops and the path to perform need to be given, in our case a horizontal move. path may contain any admissible length or type (look at paths in basic shapes).

Other animation elements are:

See also W3C-SPEC for more detailed explanations on the use animation within SVG.

Last modified: Tuesday, 10-Dec-2019 21:39:18 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: