Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterSListing 7-13. Simple Highlight on an SVG Imagemap
<!DOCTYPE html>
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="600px" viewBox="0 0 1000 660">
clipPath defines the path within it to act as a mask for the elements that reference the clipPath id, as the
lake-loise.jpeg image does. The image element is cross-linked to a bitmap picture in the same location as the map.
The image is set to its full “natural” width and height and moved on the x and y axis until it is in the same location
as the path. (It’s likely that you’ll need to set the link to the clipping path as the last action you take with the image;
otherwise, you’ll be playing a guessing game as to the position of the image while it is masked and likely invisible).
So now you have created a masked bitmap image. The CSS to reveal this portion of the map (Listing 7-15)
is simple.
Listing 7-15. CSS to Show a Clipped Image on Hover in an SVG Element
svg image { opacity: 0; transition: 400ms opacity ease; }
svg image:hover { opacity: 1; }
There’s just one problem: the clipping path is invisible, which means that there is an Alberta-sized gap in
your map. The hover effect works, but the user won’t see where to move their mouse if you apply the same effect
to the other province paths. Once it is turned into a clip, the fill on the path is useless. You can change the color all
day, and never see any difference.