单击透明区域下的链接下方(三角形或多边形链接)

时间:2013-05-14 15:10:12

标签: html html5 css3 svg

检查以下代码: 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> 

我有一个svg多边形。有没有办法可以在明星的透明部分下启用链接。

1 个答案:

答案 0 :(得分:4)

您可以使用指针事件。添加到SVG标记:

pointer-events:none

和多边形标记:

pointer-events:fill

请参阅http://jsfiddle.net/poselab/yPWxQ/

中的以下示例

更多信息: