使用 css 更改部分 SVG 颜色

Question

我有一张 SVG 图片，我想改变它的部分颜色。 SVG 将始终包含 2 种颜色，即黑色和黄色

我想用 css class 更改黄色，这样我就可以轻松切换到另一个颜色主题，而无需在黄色版本中创建所有 svg 按钮。

这可能吗？我似乎无法在网上找到很多关于此的内容..

SVG 是在 span/div 上使用 class 和背景图片

设置的

如果我使用 SVG 实现标签，那么我可以使用 css 更改颜色。但我希望尽可能将它用作 class（并且 svg 不应直接在 html 中）

<svg>
 <use xlink:href="#robot" id="robot-1" />
 </svg>

Answer 1

您可以使用 --secondary-color 将所有路径更改为 fill: currentColor，然后使用具有 CSS class 的 HTML 元素包装 SVG或应用于更新 color 属性.

的样式

更新 SVG 中当前使用 --secondary-color 的 path 后：

<div style="color:red;">
  <svg>
    <use xlink:href="#robot" id="robot-1" />
  </svg>
</div>

这是 jsFiddle 上的示例，其中黄色已更改为红色。

您不能用 CSS 覆盖 SVG 颜色，除非它是 HTML 文档的一部分。

Change part of SVG color with css