September 2001
Intermediate to advanced
592 pages
11h 42m
English
The purpose of the <animateMotion> element is to create an animation along a path. The following code creates an animation where a circle traces the shape of a rectangle four times.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/
DTD/svg10.dtd">
<svg>
<circle cx="0" cy="0" r="5" style="fill:red;
stroke:red;">
<animateMotion path="M50,50 150,50 150,100 50,100 z"
dur="5s"
repeatCount="4" />
</circle>
</svg>
|
One of the most compelling types of animation is animation on a path. The path along which the animation can take place is any path that can be expressed in SVG, which leaves enormous ...
Read now
Unlock full access