SVG fill with use tag

Question

I'm trying to change the color of an SVG displayed on different pages using <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>.

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

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="kmc-logo" viewBox="0 0 151 151">
        <g id="logo">
            <g id="outer-circle">
                <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M11.51 ..."/>
            </g>
            <g id="ceramics">
                <path stroke="none" d="M39.47 ..."/>
            </g>
        </g>
    </symbol>
</svg>

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.

Answer 1

事实上，解决方案对您来说非常简单。只需将svg文件中的所有位置从更改fill = "none"为fill = "currentColor". 在这种情况下，svg元素内的所有填充属性都会从包裹它的父元素继承颜色。然后将颜色属性添加到父元素。

.logo-svg {
    color: #fff;
}

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

<svg class="logo-svg">
  <use href="#some-svg" xlink:href="#some-svg" />
</svg>

<svg class="logo-svg--yellow">
  <use href="#some-svg" xlink:href="#some-svg" />
</svg>

<svg id="some-svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="currentColor" />
</svg>

感谢您上面的问题和回答，我通过进行所描述的更改解决了我的问题。

联合发展署。根据新规则，

您应该使用href而不是 xlink:href

Answer 2

你所做的事情看起来没问题。我在下面大致复制了它。也许这会对你有所帮助。

如果您的“陶瓷”路径未显示，则可能存在问题。但我们需要看到它。

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;
}

<svg width="0" height="0">
  <symbol id="kmc-logo" viewBox="0 0 151 151">
    <g id="logo">
      <g id="outer-circle">
        <path fill="none" stroke-linecap="round" stroke-linejoin="round"
              stroke-width="10" 
              d="M 25,25 L 25,125"/>
      </g>
      <g id="ceramics">
        <path stroke="none"
              d="M 100,25 A 50,50 0 0 0 100,125 A 50,50 0 0 0 100,25 Z"/>
      </g>
    </g>
  </symbol>
</svg>

<div class="logo--white" viewBox="0 0 151 151">
  <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
</div>

<div class="logo--yellow" viewBox="0 0 151 151">
  <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
</div>