Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterS
The solution is to place a filled copy of the path between the clipping path and the image in the code, as
shown in Listing 7-16.
Listing 7-16. A clipped Area Made Visible in SVG with the Addition of a Copied Filled Path
The bitmap image (by Kenny Louie, licensed under Creative Commons: http://flickr.com/photos/
kwl/3102355428) is still invisible, but it is rendered “above” the copied path, so it still shows when the user hovers
their mouse over the area filled with the copied path.
The final step is linking each of the areas in the SVG image. The link goes inside each group in the SVG file
itself and requires use of the xlink namespace (Listing 7-17).
Listing 7-17. A Linked Clipped Image in SVG
](http://www.hellobc.com/">)
Note that the area of the link follows the edge of the path, just as real imagemaps do, and the transition
happens within the same area.
SVG Snowflake Animation
The scalability of vector shapes means that you can use multiple copies of an SVG element at different sizes
without worrying about image quality. I’ll demonstrate this by animating vector snowflakes for a seasonal
background scene. (For this, I’ll use a slightly modified SVG snowflake downloaded from Wikimedia Commons at
http://upload.wikimedia.org/wikipedia/commons/5/50/Snow_flake.svg. See Figure 7-3.)
