Highlight SVG group elements like 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?

possible duplicate of [SVG drop shadow using css3](http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3) — Paulie_D, Jun 27 '14 at 20:54

score 1 · Answer 1 · answered Jun 27 '14 at 20:31

1

Something like this might work, just use a css-box shadow on the svg element:hover.

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

answered Jun 27 '14 at 20:31

Blunderfest

It works awesome with SVG element. But, my question was confusing. What I am trying to do is highlight a particular SVG element in a group. Like . i applied this property to it but it did not work : Any ideas>? – Cute_Ninja Jun 27 '14 at 20:44
Ahhh... then what you're looking for is here: http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 – Blunderfest Jun 27 '14 at 20:51

1 Answers1