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

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

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

Answer 2

尝试

＆＃13;

＆＃13;

[color]
        ui = true
[core]
        pager = less -r
        autocrlf = input
        excludesfile = /Users/kir/.gitignore_global
        editor = /usr/bin/vim
[push]
        default = simple
[filter "lfs"]
        clean = git-lfs clean %f
        smudge = git-lfs smudge %f
        required = true

＆＃13;

＆＃13;

＆＃13;