點擊下的透明區域（三角形或多邊形鏈接）

Question

下的鏈接檢查下面的代碼： 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多邊形。有沒有一種方法可以啓用明星透明部分下的鏈接。

Answer 1

你可以使用指針事件。添加到SVG標籤：

pointer-events:none 

和多邊形標籤：

pointer-events:fill 

請看下面的例子中http://jsfiddle.net/poselab/yPWxQ/

的更多信息：

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