html - SVG 背景颜色不适用于 Firefox

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 在 firefox 上不起作用，这就是为什么我添加了 background 属性，它按照我想要的方式工作。但是，颜色无法按预期工作。它不是具有 #fab700 的颜色，而是被解释为背景颜色。

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

附加信息:

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

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

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

Answer 1

您不能更改通过 background-image 引用的 SVG 内容的颜色.所有设置 background-color做的是设置背景的后备颜色。这就是您在这里看到的。

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