The animateMotion element causes an element to move along a motion path.

<path id="arrow" d="M0 0 v -5 h20 v-10 l10 15 l-10 15 v-10 h-20 v-5">
<animateMotion path="M 20 100 C 100 20 180 -60 260 20 . . ."  rotate="auto" />

The animateMotion references the object that is to be moved (either its parent or via xlink:href) along the path. The animateMotion element has an attribute rotate indicating how the movement should take place:

  • number: the element to be moved is rotated by number degrees about its origin
  • auto: the element is rotated over time by the angle of the direction of the path at the time. The effect is to make the element look as though it is moving along the path
  • auto-reverse: 180 degrees different, so the element appears to move along the path backwards

The default value for auto is 0.

The example below has an arrow with the origin at its point and shows how it would move along the path in the various modes of the rotate attribute. The most recent position is the most opaque.

rotate="auto" rotate="45" rotate="auto-reverse"

In the example below the ellipse is set to rotate="auto", the black arrow is rotate="auto-reverse". The green arrow is set with rotate="90" so always points downwards and the blue arrow with rotate="45" points at an angle. And if that is not what you can see then you are probably using Chrome as your browser. Not everything is implemented by all browsers. All seem to supprt auto and auto-reverse.

In general, the quality of the drawing speed in the browsers is pretty good. In the example below, there are quite a few planes moving along paths.

It is possible to define the motion path in other ways:

  • The path attribute can be replaced by an mpath child element that has as attribute a link to a path element that defines the motion path.
  • It is also possible to define (x,y) coordinates by the from, to and values attributes.

The second possibility is hardly used and is probably only useful for trivial transitions. The first does allow you to have the motion path definition external to the animateMotion element.

Here is an example of both:

<path id="mpath" d="M0,0 560,60 560,260 0,0" />
<ellipse cx="0" cy="0" rx="20" ry="10" style="fill:red"> 
<animateMotion from="0,0" to="560,-100" >begin="" dur="3s" rotate="auto"/> 
<animateMotion values="560,-100;560,160;0,0" begin="" dur="5s" rotate="0"/> 
<animateMotion begin="" dur="6s" rotate="auto"> 
<mpath xlink:href="#mpath"/> 

And finally here is an example where:

  • Text is being moved along a path by animating the text offset
  • At the same time the font-size of the text is changing
  • Finally, the path that the text is moving along is also under change
Santa's sleigh , goes up and down