- This topic is empty.
-
AuthorPosts
-
August 14, 2014 at 3:03 pm #179118SeanParticipant
Hey guys,
New to using SVGs and making my best go at it based on the great articles here. I like the idea of using the external source and using ‘use’ but can’t seem to figure out how you would then style the individual paths in an icon.
I can set the fill for an entire icon but how do you target only a specific path in an icon?
Here is my pen of it:
http://codepen.io/skennedy/pen/barCk/I want to be able to use the same icon in different places of a page but have the arrow colored differently. Seems to be a limitation since the paths are not technically placed in the “icon” class.
I feel like I am missing something so any help would be great.
Thanks!
August 14, 2014 at 10:56 pm #179149Paulie_DMemberI can set the fill for an entire icon but how do you target only a specific path in an icon?
Basically,when using..ahem
<use>
you can’t.https://css-tricks.com/swapping-svg-icons/
(because a state change on an HTML element happens at a level above the shadow root the <use> creates, thus CSS can’t penetrate through)
August 14, 2014 at 11:10 pm #179151SeanParticipant@Atelierbram: I know I can style the whole icon without the arrow class but I am looking to only change the color of the arrow in multiple places on a page.
@Paulie_D: That’s what I was thought but wasn’t totally sure. Was hoping there was a way I just didn’t know. Thanks for confirming what I was thinking. I guess if I need to do that then I’ll have to use the other SVG methods. Thanks! :)August 14, 2014 at 11:25 pm #179153Paulie_DMemberAll is not lost however…it’s just a matter of separating out the sections into individual groups and then use multiple
<use>
elements inside the SVG.August 16, 2014 at 11:43 am #179293SeanParticipant@Paulie_D Nice! I could probably work with that.
Is there a reason to use <g> instead of <symbol> for grouping paths?
August 16, 2014 at 1:28 pm #179294Paulie_DMemberIs there a reason to use <g> instead of <symbol> for grouping paths?
As far as I know a <g> defines the ‘group’ whereas the <symbol> defines it’s use if that make any sense.
I guess there is no reason, other than semantics, why you couldn’t omit the <g> stage.
It’s just the way I picked up SVG ( I hesitate to say ‘learned’)..to group stuff you used a <g>.
:)
August 16, 2014 at 4:46 pm #179304SeanParticipantI found this article from Chris that gives some more details as to the differences. :)
https://css-tricks.com/svg-symbol-good-choice-icons/Bringing it all together, I think I have something I can use now.
http://codepen.io/skennedy/pen/tsHCk/
Thanks for all the help @Paulie_D!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.