javascript - 使用 CSS/Javascript/jQuery 突出显示 <rect> 等 SVG 组元素

Question

我试图在悬停时将 SVG 元素突出显示为发光元素。

我知道我们可以使用过滤器来使用它。

但是，我想知道是否有更简单的方法通过使用 CSS 或 JavaScript 或 JQuery 来实现这一点

我知道以下代码适用于 Chrome:

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

但我不能依赖这段代码，因为它不能在 Safari 或 Firefox 上运行。

有什么想法/建议吗？

Answer 1

这样的事情可能会奏效，只需在 svg 元素上使用 css-box 阴影:hover。

Fiddle

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;
}