Rollover overlays with SVG

Question

i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.

What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.

So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.

Thanks in advance.

Answer 1

There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:

<style>
  .overlay:hover
  {
    opacity: 0.5;
  }
</style>

<svg>
  <a xlink:href="http://www.wherever/you/want/to/link/to.com">
    <path class="overlay" d="Coordinates of your shape..." />
  </a>
</svg>

I've written about various other methods at: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Answer 2

Yes it can be done with SVG only, with or without javascript.

One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).

You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.