设置 SVG Material Design Icons 的背景颜色

Posted 2023-03-25

【中文标题】设置 SVG Material Design Icons 的背景颜色

【英文标题】：Set background color of SVG Material Design Icons

【发布时间】：2015-01-09 15:20:11

【问题描述】：

我使用这里描述的方法使用 Material Design 图标：

https://github.com/google/material-design-icons#using-svg-sprites

但是，图标总是以黑色结束。我应该如何将它们的颜色更改为白色？

我知道可以编辑 SVG 源代码以达到效果的可能性，但这似乎不是规范的方法。 Material Design 图标库根据颜色有不同版本的 CSS 图像精灵，而 SVG 只有一种颜色（事实上，没有颜色，因为 SVG 代码中从未提及颜色）。如果我需要不同的 SVG sprite 文件用于白色或黑色图标，它们会包含不同的版本，就像它们在 CSS 图像 sprite 的情况下所做的那样，不是吗？

【问题讨论】：

它将在样式表中...可能是fill 或stroke

我也有同样的问题。你设法让它工作了吗？

【参考方案1】：

给出的代码是谷歌材料设计的“左V形”图标的示例。

现在，如果您想更改图标的颜色，请在第一个路径标记中添加 fill 属性。

如果您想更改其背景颜色，请在第二个路径标记中添加 fill 属性。对于没有背景颜色，给它的属性none。

<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24">
    <path d="M15.41 7.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" fill="#fff"/>
    <path d="M0 0h24v24h-24z" fill="none"/>
</svg>

【参考方案2】：

这应该只是为您的图标设置fill 属性的问题。例如，将一个名为“red”的类添加到您的图标<div>：

<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims red"></div>

然后在你的 CSS 中定义类 red"。

.red 
   fill: #ff0000;

请注意，您使用 fill 属性设置 SVG 元素的填充颜色，而不是像 html 元素那样设置“颜色”等。

【讨论】：

遇到了同样的问题。可悲的是，这对我不起作用

谢谢。必须从 SVG 文件中删除 Fill=#0000 但随后 CSS 代码开始工作

【参考方案3】：

我遇到了同样的问题 - 最终更改了图标的填充源：

<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"
      fill='white'/>

【参考方案4】：

我面临着完全相同的问题。唯一对我有用的解决方案是手动编辑 .svg 文件以在每个路径中添加 fill="white"。但是，我不喜欢 .svg 文件中的硬编码颜色。

由于我在项目中使用了 angularjs，因此我编写了一个 angularjs 指令，该指令可以生成具有自定义填充颜色/大小的 svg 图标。我在这里分享它，以防有人发现它有用：https://klarsys.github.io/angular-material-icons/demo.html

【讨论】：

请附上如何“设置 SVG Material Design 图标的背景颜色”的相关示例。而不仅仅是链接到异地项目。

@EWit，除了手动编辑 .svg 文件，我找不到任何其他方法。

【参考方案5】：

您可以尝试将其打包成字体文件并像Glyphicons in Bootstrap 一样使用它。然后，您可以根据需要使用颜色和背景颜色对其进行归因。