animateMotion Element

The <animateMotion> element is used to animate the object along a single-line path as well as along an arbitrary path.

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<g>
<rect x="0" y="0" width="30" height="30" style="fill: gray; stroke: black"/>
<circle cx="30" cy="30" r="15" style="fill: red; stroke: black;"/>
<animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/>
</g>

</svg>
</body>
</html>

Test it Now

Animation along a complex path

If you want the animation along the more complex path then use the path attribute and its value in the same format as the "d" attribute in the <path>element.

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width=500 height="500">

<path d="M50,125 C 100,25 150,225, 200, 125"
 style="fill: none; stroke: green;"/>
<path d="M-10,-3 L10,-3 L0,-25z" style="fill: yellow; stroke: black;">
<animateMotion
 path="M50,125 C 100,25 150,225, 200, 125"
 dur="6s" fill="freeze"/>
</path>

</svg>
</body>
</html>

Test it Now

Next TopicLinks in SVG

← prev next →