- This topic is empty.
-
AuthorPosts
-
August 18, 2014 at 7:31 am #179457
mvaneijgen
ParticipantI 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
August 18, 2014 at 8:34 am #179462Paulie_D
MemberCSS 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.August 18, 2014 at 8:37 am #179463August 18, 2014 at 8:39 am #179464Paulie_D
MemberSorry, was looking a the second CP….edited.
August 18, 2014 at 8:50 am #179465mvaneijgen
Participantupdated 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.
August 18, 2014 at 8:59 am #179467Paulie_D
MemberIt 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.
August 18, 2014 at 9:22 am #179476mvaneijgen
Participanthttp://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.
August 18, 2014 at 10:06 am #179487Paulie_D
MemberUsing a hover…or a click?
If it’s a hover…you’re nearly there otherwise it’s JS for clicks etc.
August 18, 2014 at 10:08 am #179489mvaneijgen
Participantbut then i still cant use the <use xlink:href method right?
August 18, 2014 at 10:20 am #179493Paulie_D
Memberbut 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.
August 19, 2014 at 5:13 am #179805mvaneijgen
Participant@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
August 19, 2014 at 5:17 am #179806Paulie_D
MemberAs I said, this stuff is still relatively new to me….You might want to look into Snap.svg
It can be used to animate existing SVG but not (AFAIK) when using symbols or defs in a
use
. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.