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

Chapter 8. Animation: SVG and SMIL Animation > The <animateMotion> Element

The <animateMotion> Element

The purpose of the <animateMotion> element is to create an animation along a path. The following code creates an animation where a circle traces the shape of a rectangle four times.

Listing 8.20. (AnimPath00.svg)

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/PR-SVG-20010719/ 
       DTD/svg10.dtd"> 
<svg> 
<circle cx="0" cy="0" r="5" style="fill:red; 
stroke:red;"> 
<animateMotion path="M50,50 150,50 150,100 50,100 z" 
dur="5s" 
        repeatCount="4" /> 
</circle> 
</svg> 


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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