Files used

Right-click, save ...

• anim.shtml
• anim.svg

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!

Translation

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"/>
</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).

• fill="freeze" prevents the animated element to return in its initial state.

Other animation elements are:

• animateTransform for coordinate transformations.
• animateColor changes color values, also with steps.
• animate changes any changeable value for an element. This needs to be named; working with opacity this would give attributeName="opacity" and attributeType="CSS".
• set: does not animate from on state to another but sets to a new state; like animate, set supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values.

See also www.w3.org/TR/SVG/animate.html W3C-SPEC for more detailed explanations on the use animation within SVG.