Click under the links under the transparent area (triangular or polygon link)

Question

Check the following code: http://jsfiddle.net/q8Ycz

<div style="background-color: red; width: 200px;" onclick="alert('behind')"> 
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <div><a href="test">test test test test test test test test test test test</a></div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" style="position: absolute; top: 0; left: 0;">
    <polygon onclick="alert('hello')" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
  </svg> 
  </div> 

I have an svg polygon. Is there a way that I can enable the links under the transparent parts of the star.

Answer 1

You could use pointer-events. Add to the SVG tag:

pointer-events:none

and to polygon tag:

pointer-events:fill

See the following example in http://jsfiddle.net/poselab/yPWxQ/

More information in:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://www.w3.org/TR/pointerevents/