Carrying pads with SVG

Question

I want to get the effect of this page using SVG. As you can see, it uses a series of transparent PNG overlays when the mouse user goes around the polygonal access point drawn on the product.

What I want to achieve is the same with SVG, but without messing around with creating a PNG load, so when the user clicks on an area, a transparent form (with a link to it) appears on top. An SVG shape will be constructed from a set of coordinates in the same way as a polygonal access point on an image map.

So, I think, my first question is: can this be done with a simple old SVG or do I need to use something like Raphael to achieve this? I have never seen this effect before using SVG, so if anyone has an example that would be very useful.

Thanks in advance.

Answer 1

There are several ways to get this effect with a simple old SVG. Probably the easiest is to use CSS in SVG. For instance:

<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 wrote about various other methods: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Answer 2

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

One way to get the effect is to overlay a white translucent path on top of the image you want to whiten. Another way is to use the SVG filter to process the image directly, similar to what I did here or here to repaint PNG (look at the source of the page and feel free to reuse it the way you like).

You most likely want to use the 'event-pointer' property. Here's an example showing how to detect mouse events when filling out and / or hitting the svg form, even if the form is invisible.