[Solved] Problem with inline SVG and :hover

[Rasmus Jürs]

I am trying to get :hover to work on a svg file.
I am sure i have seen this work before. Why doesn’t it now?

http://codepen.io/Jurs/pen/xbbgrV?editors=110

[Paulie_D]

No…as far as I know you can’t ‘reach into’ a def/use to the underlying ‘sub-elements’ like that.

Works with an actual inline SVG though.

http://codepen.io/Paulie-D/pen/yyygqB

[Paulie_D]

What you can do is create each element as a separate def and use those with a class inside a ‘grouping’ svg.

http://codepen.io/Paulie-D/pen/WbbpOv

[Rasmus Jürs]

Thanks Paulie_D for 2 great answers – very usefull.

SVG used in this manner may be lightweight and flexible. But i still find it quite a bit fiddly. Guess it’s just a matter of getting to know the syntaxes and best practises a bit better.

[Author]

Posts