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
Right-click, save ...
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:
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"/> </g>
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 www.w3.org/TR/SVG/animate.html W3C-SPEC for more detailed explanations on the use animation within SVG.
Tuesday, 10-Dec-2019 21:39:18 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/anim.shtml