SVG填充使用use标签

Question

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

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

这是我要引入的symbol SVG（缩短为相关部分）：

<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 颜色对于上面阴影 DOM 的 SVG 中的 #outer-circle 是有效的，但填充在 #ceramics 内部的路径中不起作用。

有没有人能够解释一下？提前致谢！

编辑：我在发现问题不是由于 CSS 专业性而是由于在阴影 DOM svg 中样式化元素引起的后，更新了这个问题。

- dmoz

---

访问过的链接是否显示为 #fff，你的问题是“为什么 a:visited 没有被划掉”？还是访问过的链接颜色实际上出现为 #343533？如果是后者，我们需要一个演示来重现这个问题。我已经复制+粘贴了你的代码，虽然 a:visited 仍然被列出，但 #masthead > .content-width .site-branding h1 a:visited 显示了正确的颜色。 - Tyler Roper

@TylerRoper，我已经在我的问题中添加了一些相关信息。它涉及在影子DOM中使用SVG。很抱歉我一开始没有明确说明这一点。 - dmoz

如果我们想要帮助，我认为我们需要一个 [mcve]。你试过多少个浏览器？ - Robert Longson

我已经添加了相关代码的最后一部分：我正在尝试样式化的嵌套svg。#ceramics path 的 fill 属性使我无法解决问题。我已经尝试了明确设置它，这可以工作，但我需要在不同情况下能够更改颜色。我已经尝试过 fill="currentColor"，但这会从我的问题开头提取 ＃343533 颜色。 - dmoz

在发现我遇到的更具体的问题之后，我更新了我的问题：如何对使用“use”标签显示的SVG中的元素进行着色/样式设置。 - dmoz

最终我发现，我之前添加的 * { transition: all .2s ease; } 阻止了填充样式应用到这个 SVG 上。为什么？怎么回事？我不确定。但是我把它删除了，现在一切都按预期工作了。感谢所有花时间检查它的人！对于这个偏离话题，我很抱歉！ - dmoz

Answer 1

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

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

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

UPD。 根据新规则，

应该使用href而不是xlink:href

请参考href

- Kirilo Lozitsky

---

我在Chrome上遇到了很多奇怪的行为，这个帮了我很大忙。现在我可以像任何字体一样改变颜色。谢谢。 - Hache_raw

我很高兴它有所帮助。 - Kirilo Lozitsky

fill="none" 无法从父级更新 SVG 颜色。这很有帮助，谢谢！ - A.Srisuma

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>

- Paul LeBeau