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

11. Animating and Scripting SVG > The animateColor Element

The animateColor Element

The <animate> element doesn’t work with colors, since a color is not represented as a simple numeric value. Instead, the special <animateColor> element fills that purpose. Its from and to attributes are color values, as described in Chapter 3, in Section 3.2.2. In Example 11-9 we animate the fill and stroke colors of a circle, changing the fill from light yellow to red and the gray outline to blue. Both animations start two seconds after the page loads; this gives you time to see the original colors.

Example 11-9. Example of animateColor
<circle cx="60" cy="60" r="30"
	style="fill: #ff9; stroke: gray; stroke-width: 10;">
    <animateColor attributeName="fill"
        begin="2s" dur="4s" from="#ff9" to="red" fill="freeze"/>
    <animateColor attributeName="stroke"
        begin="2s" dur="4s" from="gray" to="blue" fill="freeze"/>
</circle>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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