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

Chapter 11. SVG Animation Elements > The animateColor Element

The animateColor Element

The animateColor element is, as its name suggests, a specialized animation element that changes a color value over time. Listing 11.13 shows an animateColor example.

Listing 11.13. AnimColor.svg—Altering the fill Property Using animateColor

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="" height="">
<defs>
<style type="text/css">
<![CDATA[
text{
font-size:28;
font-family:Arial, sans-serif;
fill:green;
stroke:none;
}
]]>
</style>
</defs>
<text x="50px" y="80px" >
SVG is RED hot when moused!
<animateColor attributeName="fill" from="green" to="red"
 begin="mouseover" dur="0.01s" fill="freeze" />
<animateColor attributeName="fill" from="red" to="green"
 begin="mouseout" dur="0.01s" fill="freeze" />
</text>
</svg>
					

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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