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:

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:
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Moving an element along alinear path</title>
  6. </head>
  7. <body>
  8. <h2>Linear Path</h2>
  9. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  10. <rect fill="purple" stroke="black" stroke-width="3px"
  11. x="0px" y="0px" width="100px" height="100px">
  12. <animateMotion
  13. from="0,0" to="100,100"
  14. dur="4s" fill="freeze"/>
  15. </rect>
  16. </svg>
  17. </body>
  18. </html>
Output
When the rectangle is at the origin:
linear1.jpg
When the rectangle is at the Destination:
linear2.jpg

Moving an element along a Curved Path

Representation of a path

The available commands are:
Example of Curved Path:
  1. <!DOCTYPE html>
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>SVG SMIL Animate with Path</title>
  6. <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  7. </head>
  8. <body>
  9. <h1>SVG SMIL Animate with Path</h1>
  10. <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  11. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  12. <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">
  13. <desc>Example animMotion01 - demonstrate motion animation computations</desc>
  14. <rect x="1" y="1" width="498" height="298" fill="green" stroke="blue" stroke-width="2"/>
  16. <!-- Draw the outline of the motion path in blue, along
  17. with three small circles at the start, middle and end. -->
  18. <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"/>
  19. <circle cx="100" cy="250" r="17.64" fill="black"/>
  20. <circle cx="250" cy="100" r="17.64" fill="black"/>
  21. <circle cx="400" cy="250" r="17.64" fill="black"/>
  23. <!-- Here is a triangle that will be moved about the motion path.
  24. It is defined with an upright orientation with the base of
  25. the triangle centered horizontally just above the origin. -->
  26. <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">
  28. <!-- Define the motion path animation -->
  29. <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
  30. <mpath xlink:href="#path1"/>
  31. </animateMotion>
  32. </path>
  33. </svg>
  34. </body>
  35. </html>
Output
Triangle at Starting Position:
curved.jpg
Triangle at Middle Position:
curved1.jpg
The triangle at Last Position:
curved2.jpg