title: Rollover overlays with SVG
body: <p>i want to acheive the effect on <a href="http://www.topshop.com/webapp/wcs/stores/servlet/CatalogNavigationSearchResultCmd?catalogId=33057&amp;storeId=12556&amp;langId=-1&amp;viewAllFlag=false&amp;categoryId=243998&amp;interstitial=true&amp;TS=1304585859188" rel="nofollow">this page</a> 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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Thanks in advance.</p>