Question

我正在尝试使用<svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>更改显示在不同页面上的SVG的颜色。

我正在尝试的方法在这里：https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/。

这是我要插入的SVG symbol（简称为相关部分）：

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

我的样式表中有这种样式：

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

此处的stroke颜色对于上方阴影域SVG中的#outer-circle效果很好，但是填充在#ceramics内部的路径上不起作用。

谁能阐明一些想法？预先感谢！

编辑：发现问题不是css的特定性，而是shadow-dom svgs中的样式元素后，我对此问题进行了更新。

Answer 1

您所做的事情似乎还可以。我在下面大致复制了它。也许这会对您有所帮助。

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

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>

SVG使用标记填充

1 个答案: