• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

11. Animating and Scripting SVG > The animateMotion Element

The animateMotion Element

By using translate with the <animateTransform> element, you can cause an object to animate along a straight-line path. The <animateMotion> element lets you do this as well; additionally, it allows you to animate an object along an arbitrary path.

If you insist on using <animateMotion> for straight-line motion, you simply set the from and to attributes, assigning them each a pair of (x, y) coordinates. Example 11-13 moves a grouped circle and rectangle from (0,0) to (60,30).

Example 11-13. Animation along a linear path
<g>
    <rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/>
    <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;"/>
    <animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/>
</g>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint