作者robinnpca (rob)
看板Ajax
標題[問題] 請問svg和div的穿透
時間Tue Jul 10 16:28:33 2012
請教
因為不知道可否將svg和div層分出上下層的直接方法?
所以若將svg寫在div上用z-index來區分
(其實不太想將svg寫在div中但在div邊邊的svg都無法啟動onclick事件)
而本身svg有onclick事件
他下面的div也有onclick事件
要如何在按svg如一個中空圓形的圓周才會啟動svg事件
而圓周外圍和圓的內部
能穿透去啟動下層的div事件呢？
寫法如下(但是圓的中空和周圍都無法按到下面的div層事件
用style="pointer-events:auto" 在firefox13也沒效果?!)
$(function() {
window.runcircle=function(evt){
alert("circle按到");
}
$(".outdiv").click(function(){
alert("jquery的div onclick");
});
});
<body>
<div class="outdiv"
style="position:absolute;z-index:1;background-color:yellow;border:5px solid
red;top:100;left:100;height:200px;width:250px;">
</div>
<div style="position:absolute;z-index:2;">
<svg xmlns="
http://www.w3.org/2000/svg" viewBox="0 0 500 500"
height="200" width="400" y="100" x="100" title="svg2" >
<circle id="circleid" title="circle1" stroke-width="20" stroke="red"
fill="none" r="150" cy="250" cx="250" onclick="runcircle(evt)" />
</svg>
</div>
--
寧願天空是藍色～
也不願心情是藍的！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.58.177.160
2F：→ musie:用d3.js 很快就能寫出來了 07/10 16:57
3F：→ robinnpca:感謝提供！趕緊研究一下！ 07/10 17:39