作者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