svg元素的'display'屬性如何影響鼠標事件？

我有這樣svg元素的'display'屬性如何影響鼠標事件？

<svg style="display:block"> 
</svg>

問題的HTML代碼是SVG元素不能捕捉鼠標事件。其他顯示屬性，如'內嵌塊'，...會產生相同的效果。使用'inline'屬性，它可以捕獲鼠標事件。我想知道爲什麼以及如何解決它。試試這個容易理解

<!DOCTYPE html> 
<html> 
<body onmousedown="alert('body')"> 
<svg style="display:block" width="300" height="300" onmousedown="alert('svg1')"></svg> 
<svg width="300" height="300" onmousedown="alert('svg2')"></svg> 
</body> 
</html>

來源

2013-12-16 Bạch Ngọc Sơn

希望別人能夠回答主要問題，但根據您的最終目標，我想知道解決方法是否可以像用同樣大小的白色矩形填充它？所以像這樣http://jsfiddle.net/5hd6D/ – Ian

謝謝！我已經解決了我的問題，但我仍然想知道主要問題。 –

這是僅適用於Chrome和Opera的情況下，由於鉻的錯誤：https://code.google.com/p/chromium/issues/detail?id=379299（如果你選擇其他瀏覽器如Firefox，你會發現，它實際是按預期工作。）

修復程序has been committed to the master branch，並應在幾個月內（〜2014年夏末）在這些瀏覽器的穩定版本中運行。

與此同時，您可以通過將<svg>包裝在display: block容器元素中來解決此問題（取決於您的用例）。

來源

2014-05-30 11:49:22

svg元素的'display'屬性如何影響鼠標事件？

回答

相關問題