SVG fill with use tag

Question

I'm trying to change the color of an SVG displayed on different pages using .

The methods I'm trying are here: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/.

This is the SVG symbol I'm pulling in (shortened to relevant pieces):

I have this style in my stylesheet:

#masthead > .content-width .site-branding .logo--white a #logo-svg {
    fill: #fff;
    stroke: #fff;
}

The stroke color here is working fine for the #outer-circle in the shadow-dom'd SVG above, but the fill isn't working on the path inside #ceramics.

Can anyone shed some light? Thanks in advance!

EDIT: I've updated this question after discovering that the issue isn't with css specificity, but rather with styling elements inside shadow-dom svgs.

user_1292848 · Answer

What you've done seems okay. I've reproduced it roughly below. Perhaps this will help you.

If your "ceramics" path is not showing, then there might be something wrong with it. But we would need to see it.

body {
  background-color: blue;
}

.logo--white #logo-svg {
    fill: #fff;
    stroke: #fff;
}

.logo--yellow #logo-svg {
    fill: #ff0;
    stroke: #ff0;
}

div {
  width: 100px;
  height: 100px;
  margin: 20px;
}

user_9586230 · Answer

In fact, the solution is very simple for you. Just change everywhere in the svg file from fill = "none" to fill = "currentColor". In this case, all the fill properties inside the svg element inherit the color from the parent element that wraps it. Then add color property to parent element.

.logo-svg {
    color: #fff;
}

.logo-svg--yellow {
    color: yellow;
}

Thanks to your question and answer above, I solved my problem by making the changes I described.

UPD. According to the new rules,

instead of xlink:href you should use href

SVG fill with use tag

2 Answers