Home/ Questions/Q 4593168
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T22:38:42+00:00

i want to acheive the effect on this page using SVG. As you can

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0