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

Question

I am trying to highlight the SVG element on hover as glowing element.

I know we can use it using filters.

But, I wonder is there any easier way to achieve that by using CSS or JavaScript or JQuery

I know following code works on Chrome:

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

But I cannot rely on this code as it doesnt work on Safari or Firefox.

Any ideas/suggestions?

Answer 1

Something like this might work, just use a css-box shadow on the svg element :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;
}