Need help styling individual SVG paths using 'use'

[Sean]

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!

[Paulie_D]

I 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)

[Sean]

@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! :)

[Paulie_D]

All 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.

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

[Sean]

@Paulie_D Nice! I could probably work with that.

Is there a reason to use <g> instead of <symbol> for grouping paths?

[Paulie_D]

Is 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>.

:)

[Sean]

I 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!

[Author]

Posts