时间戳

首页 > 解决方案 > 使用 css 更改部分 SVG 颜色

html - 使用 css 更改部分 SVG 颜色

问题描述

我有一个 SVG 图像，我希望改变它的部分颜色。SVG 将始终由 2 种颜色组成，即黑色和黄色

我正在寻找使用 css 类更改黄色，因此我可以轻松切换到另一种颜色主题，而无需在黄色版本中创建所有 svg 按钮。

这是可能吗？我似乎在网上找不到太多关于这个的..

SVG 使用带有 background-image 的类在 span/div 上设置

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

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

Turorial： https ://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

JsFiddle： https ://jsfiddle.net/wahjvmnq/

标签： htmlcsssvg

解决方案

--secondary-color您可以使用to更改所有路径fill: currentColor，然后使用 HTML 元素包装 SVG，该元素应用了 CSS 类或样式以更新color属性。

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

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

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

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

推荐阅读