SVG 背景颜色在 Firefox 上不起作用答案

【问题标题】：SVG background color not working on FirefoxSVG 背景颜色在 Firefox 上不起作用
【发布时间】：2016-03-07 19:26:37
【问题描述】：

我在使用 svg 时遇到了一些问题。我有以下 html 和 css 代码

<i id="iconApp" class="icon_approved icon_lg pull-right"></i>

.icon_approved {
    background-color: #fab700;
    display: block;
    mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
    background: url(../Tick-Solid.svg) no-repeat 50% 50%;
}

mask 在 firefox 上不起作用，这就是为什么我添加了 background 属性，它按我想要的方式工作。但是，颜色没有按预期工作。它的颜色不是#fab700，而是被解释为背景颜色。

橙色应该是图标的颜色，而不是背景颜色。

附加信息：

我找不到用于查找此类问题的搜索词，但我确实找到了与我的问题相似的内容。

链接：http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

查看第一个示例后，它可以在 chrome 上正确呈现。但是如果您在 Firefox 上打开链接，它会显示为框（我假设是元素的背景颜色）。

【问题讨论】：

掩码必须指向 svg 文件中的掩码元素，而不是完整的 svg 文件。这是您的代码错误，而不是 Firefox。您还设置了背景颜色，看起来很惊讶它就像背景颜色。您链接到的帖子有错误。
我在博客中添加了一条指出错误的评论。

标签： html css svg

【解决方案1】：

您无法更改通过 background-image 引用的 SVG 内容的颜色。所有设置background-color 所做的都是设置背景的后备颜色。你在这里看到的是什么。

如果要更改图标颜色，则必须更改 SVG 文件。或者您可以在 HTML 中内联 SVG，也可以通过 <object> 元素来实现。

【讨论】：

【解决方案2】：

试试

.icon_approved {
  fill: #fab700;
}

【讨论】：