鼠標事件不起作用，同時重疊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行

回答

相關問題