突出顯示SVG組元素，例如 <rect> 使用CSS / Javascript / jQuery

Question

我試圖突出顯示懸停時的SVG元素作為發光元素。

我知道我們可以使用過濾器來使用它。

但是，我想知道有沒有更簡單的方法可以通過使用CSS或JavaScript或JQuery來實現

我知道以下代碼可在Chrome上運行：

-webkit-svg-shadow: 0 0 7px red;

但是我不能依賴此代碼，因為它無法在Safari或Firefox上運行。

有什么想法/建議嗎？

Answer 1

像這樣的事情可能會起作用，只需在svg元素:hover上使用css-box陰影。

小提琴

HTML

<svg height=100 width=100 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

CSS

svg{
    background-color:#ccc;
}
svg:hover{
    box-shadow: 0 0 20px yellow;
}