SVG Animatemotion Element

by Online Tutorials Library July 14, 2022

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

SVG Animatemotion Element

animateMotion Element

Example

Animation along a complex path

Example

Learn SQLite Tutorial

Difference between function and method in Swift

You may also like