- This topic is empty.
-
AuthorPosts
-
August 18, 2014 at 7:31 am #179457mvaneijgenParticipant
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
August 18, 2014 at 8:34 am #179462Paulie_DMemberCSS 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_DMemberSorry, was looking a the second CP….edited.
August 18, 2014 at 8:50 am #179465mvaneijgenParticipantupdated 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_DMemberIt 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 #179476mvaneijgenParticipanthttp://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_DMemberUsing 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 #179489mvaneijgenParticipantbut then i still cant use the <use xlink:href method right?
August 18, 2014 at 10:20 am #179493Paulie_DMemberbut 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 #179805mvaneijgenParticipant@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_DMemberAs 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.