Pro CSS3 Animation

Any CSS3 transform, transition, or animation that can be applied to an HTML element can also be applied to
SVG, making the combination of vector shapes and CSS extremely powerful.

An Animated SVG Imagemap

In this exercise, you’ll use SVG to duplicate the functionality of an HTML imagemap UI, but you’ll add several
evolutionary steps: sections of your SVG “imagemap” will mask image content that will be transitioned in with
CSS3 on hover over the appropriate areas (see Figure 7-2).

First, you need an SVG drawing. Thankfully, there is a great deal of free SVG content available online: in this
case, I will use a map of Canada supplied by Wikimedia Commons. For the purpose of illustration, I’ve edited the
map down to just the provinces of British Columbia, Alberta and Saskatchewan.
Each province is demarked by a path, supplied as a string of coordinates. We’ll start with inlining the SVG in
our page and creating a simple hover effect on each path. The result will look something like Listing 7-13.

Figure 7-2. An SVG imagemap