AnimateMotion Following a Path

SVG Animation Path Element

The <amimatemotion> element allows us to animate an element position and rotation according to a path. The path is defined the same way as in path. You can set the attribute to define whether the object rotates following a tangent of the path.

The effect of a motion path animation is to add a supplementary transformation matrix that causes a translation along the x- and y-axis of the current user coordinate system by the computed X and Y values computed over time.

The "animateMotion" causes the displacement of an element along a motion path.

Animation following a path:

Linear Motion
Curved Motion

Moving an element along a Linear Path

Linear path animation is almost always the easiest form of animation, in that you only need to specify a beginning and endpoint and move the element between the two points over a specified period of time.

The animation in this article is handled by the animatemotion element. In this example, once more a rectangle element is created with some optional style attributes, and its starting x and y coordinates are set to 0,0 (the top-left corner, or origin).

Now use the "animateMotion" tag to specify the beginning and endpoints of the animation, along with setting the duration of the animation to 4s. The fill attribute is then set to "freeze" so that the last frame of the animation is retained on-screen after the animation is finished.

Example of Linear Path:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Moving an element along alinear path</title>
</head>
<body>
<h2>Linear Path</h2>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="purple" stroke="black" stroke-width="3px"
x="0px" y="0px" width="100px" height="100px">
<animateMotion
from="0,0" to="100,100"
dur="4s" fill="freeze"/>
</rect>
</svg>
</body>
</html>

Output

When the rectangle is at the origin:

When the rectangle is at the Destination:

Moving an element along a Curved Path

Representation of a path

The available commands are:

M: move (Move);
L: the creation of a line
H: creating a horizontal line
V: Creating a vertical line
C: Creating a curve
S: creation of a smooth curve
Q: Creating a bezier curve;
T: Creating a smoothed bezier curve
A: creation of an arc;
Z: termination of the road or path.

Example of Curved Path:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG SMIL Animate with Path</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>SVG SMIL Animate with Path</h1>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example animMotion01 - demonstrate motion animation computations</desc>
<rect x="1" y="1" width="498" height="298" fill="green" stroke="blue" stroke-width="2"/>
<!-- Draw the outline of the motion path in blue, along
with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"/>
<circle cx="100" cy="250" r="17.64" fill="black"/>
<circle cx="250" cy="100" r="17.64" fill="black"/>
<circle cx="400" cy="250" r="17.64" fill="black"/>
<!-- Here is a triangle that will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
</body>
</html>

Output

Triangle at Starting Position:

Triangle at Middle Position:

The triangle at Last Position: