SVG填充不适用于FireFox

我似乎无法弄清楚为什么Firefox使用默认的svg填充颜色而不是类的填充.

以下是查看FF检查员时的3次填充:

正在插入SVG

它应该显示.skip-link .icon填充白色(#fff),但它实际上是使用#002649的SVG填充; 如果我将.skip-link .icon更改为.skip-link svg,那么它可以正常工作.为什么我不能使用类而是显式地声明元素？

我是否遗漏了一些关于Firefox如何填充SVG的明显内容？这个CSS在其他浏览器中工作正常.

如果该行为在版本56之前是Firefox独有的,那是因为它#menu-bag引用了一个元素.

规范说 应该实现重用,好像它被嵌套替换.Firefox过去常常在他们的影子DOM中对待它.阴影DOM在DOM检查器中不可见,但它受CSS选择器的限制.

这意味着这段代码:

WAs实现如下:

在svg.icon您的匹配.skip-link .icon规则(和凯尔米特指出,该规则将总是优先于你的a:hover svg规则).该值也由元素继承.

但是,shadow-DOM 不会获取继承值,因为它直接使用svg规则进行样式设置.当您将选择器更改为.skip-link svg或触发a:hover svg规则时,隐藏的内部元素将直接应用样式,因为该SVG也是链接的后代.

正如Robert Longson在评论中指出的那样,这不应该如何运作.这是Firefox实现元素作为完整克隆DOM树的方式的副作用,这些DOM树恰好隐藏在DOM检查器中.

这是您原始问题的"工作"示例.也就是说,在Chrome,Safari,Opera,Firefox 56+或IE上,您会看到一个绿色圆圈,当您将其悬停时不会改变,但在版本56之前的Firefox上,您会看到一个蓝色圆圈变为红色悬停/焦点.

svg {
    fill: navy;
}
a:hover svg, a:focus svg {
    fill: red;
}
.skip-link .icon {
    fill: green;
}
.icon {
    height: 50;
    width: 50;
}