Firefox浏览器上SVG背景颜色无法正常工作

Question

我遇到了一些关于使用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”在火狐浏览器上无法使用，因此我添加了“background”属性，它可以按照我想要的方式工作。但是，颜色并没有按预期工作。它被解释为背景颜色，而不是“#fab700”颜色。

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

附加信息:

我找不到搜索词来查找这种问题，但我找到了与我的问题类似的东西。

链接: http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images 看第一个例子，在Chrome上可以正确渲染。但是如果在Firefox上打开链接，它会显示为方框（我认为是元素的背景颜色）。

- GibiDroidZ

---

一个遮罩必须指向SVG文件中的遮罩元素，而不是完整的SVG文件。问题出在你的代码上，而不是Firefox浏览器。你还设置了一个背景颜色并感到惊讶它表现得像一个背景颜色。你链接的文章里也有错误。 - Robert Longson

我已经添加了一条评论，指出博客中的错误。 - Robert Longson

Answer 1

通过background-image引用的SVG内容的颜色是无法更改的。设置background-color只是设置背景的回退颜色，这就是你在这里看到的。

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

- Paul LeBeau

Answer 2

尝试一下

.icon_approved {
  fill: #fab700;
}

- Kostas