:hover svg use xlink [not working]

[mvaneijgen]

I saw @Chris his post on swapping out svg icons and thought why not use one svg element with 4 paths changing the rotation of the paths.

But then found out :hover-ing on a referenced SVG does not work.
See pen:
http://codepen.io/mvaneijgen/pen/ybtcu/

When talking with a colleague we ended up with this, so you can hover on a element and activate a other element

But this only work down not up

[Paulie_D]

CSS cannot affect elements higher up in the DOM (yet)…so your selector only works downwards….it cannot work the other way round.

For that you need JS/JQ.

Also, when using a <use> element…no you cannot target individual paths etc within the definition using CSS.

[mvaneijgen]

There is a SVG element in my frist embed with the arrows

[Paulie_D]

Sorry, was looking a the second CP….edited.

[mvaneijgen]

updated the pen.

If you just call the svg you can change the color on hover. Is there any other way to have the CSS update with interaction of a user? I picked :hover cause it was easy to demonstrate.

[Paulie_D]

It depends on what you want to do?

In general, when it comes to changes in SVG you are limited to what CSS can do.

http://tutorials.jenkov.com/svg/svg-and-css.html#css-attributes

JS/JQ lets you do more…and there are libraries written for that including Raphael.js and Snap.svg

If it wish to continue using <use> and swap out ‘elements’ &/or ‘classes’…it can be done with Js/JQ but it can get a little messy.

[mvaneijgen]

http://codepen.io/mvaneijgen/pen/GLEKq

All i want is to change the purpose if my menu icon with SVG when the menu is open or wen the menu should close.

[Paulie_D]

Using a hover…or a click?

If it’s a hover…you’re nearly there otherwise it’s JS for clicks etc.

[mvaneijgen]

but then i still cant use the <use xlink:href method right?

[Paulie_D]

but then i still cant use the <use xlink:href method right?

Using JS/JQ there are things you can do even with the <use> element, switching classes, animating the whole thing but referencing elements inside the <use> then not really…

Although constructing the SVG using JS (I’ve been playing with Snap today) seems a nice option but I haven’t dug into it very deeply.

[mvaneijgen]

@Paulie_D still here? I updated my pen again with some jQeury and it wokrs!

http://codepen.io/mvaneijgen/pen/GLEKq

only think is no CSS animations

[Paulie_D]

As I said, this stuff is still relatively new to me….You might want to look into Snap.svg

http://snapsvg.io/

It can be used to animate existing SVG but not (AFAIK) when using symbols or defs in a use.

[Author]

Posts