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

11. Animating and Scripting SVG > Animation Basics

Animation Basics

The animation features of SVG are based on the World Wide Web Consortium’s Synchronized Multimedia Integration Language Level 2 (SMIL2) specification http://www.w3.org/TR/smil20/. In this system, you specify the starting and ending values of the attribute, color, motion, or transformation that you wish to animate; the time at which the animation should begin; and the duration of the animation. Example 11-1 shows this in action.

Example 11-1. The incredible shrinking rectangle
<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">     [1]
    <animate     [2]
        attributeName="width"     [3]
        attributeType="XML"     [4]
        from="200" to="20"     [5]
        begin="0s" dur="5s"     [6]
        fill="freeze" />     [7]
</rect>     [8]

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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