鼠标事件不起作用，同时重叠SVG行

我有一个这样的页面，在这里我有两个圆形一个黄色和一个红色，同时放置时，鼠标事件不触发意味着底层圆形鼠标事件是隐藏鼠标事件不起作用，同时重叠SVG行

<!DOCTYPE html> 
<html> 
<body> 

<h1>My first SVG</h1> 

<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:2;"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('yellow clicked')"/> 
    Sorry, your browser does not support inline SVG. 
</svg> 

<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:1;"> 
    <circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="brown" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('red clicked')"/> 
    Sorry, your browser does not support inline SVG. 
</svg> 

</body> 
</html>

来源

2014-04-09 user3516268

的SVG元素具有属性pointer-events，控制事件是否被触发与该元件。例如如果你对你的顶圆设置pointer-events="none"，就变成透明的，因此事件可以在底圆

<svg id="mySVG" width="400" height="400"> 
<circle onclick=alert() id=bottomCircle cx=200 cy=200 r=150 fill=red /> 
<circle pointer-events="none" id=topCircle cx=200 cy=200 r=130 fill=blue /> 
</svg>

来源

2014-04-09 18:35:52

谢谢，我现在已经解决了它 – user3516268

发生现在的工作

<!DOCTYPE html> 
<html> 
<body> 

<h1>My first SVG</h1> 

<svg> 
<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:2;"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('yellow clicked')"/> 
    Sorry, your browser does not support inline SVG. 
</svg> 

<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:1;"> 
    <circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="brown" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('red clicked')"/> 
    Sorry, your browser does not support inline SVG. 
</svg> 
</svg> 
</body> 
</html>

来源

2014-04-10 15:43:05 user3516268

鼠标事件不起作用，同时重叠SVG行

回答

相关问题