突出显示SVG组元素,如<rect>使用CSS / Javascript /jQuery

Highlight SVG group elements like <rect> with CSS / Javascript /jQuery

本文关键字:使用 CSS jQuery Javascript rect 显示 元素 SVG      更新时间:2023-09-26

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

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

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

我知道以下代码在Chrome上工作:

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

但是我不能依赖这段代码,因为它不能在Safari或Firefox上工作。

意见/建议吗?

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

小提琴

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