SVG填充不适用于FireFox

Question

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

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

正在插入SVG

<svg class="icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
</svg>

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

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

Answer 1

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

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

这意味着这段代码:

<a href="#" class="skip-link">
    <svg class="icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
    </svg>
</a>

WAs实现如下:

<a href="#" class="skip-link">
    <svg class="icon">  
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag">
          <!--Start of shadow DOM boundary-->
          <svg><!-- replacement for <symbol> -->
             <!-- graphics content -->
          </svg>
          <!--End of shadow DOM boundary-->
        </use>
    </svg>
</a>

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

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

正如Robert Longson在评论中指出的那样,这不应该如何运作.这是Firefox实现<use>元素作为完整克隆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;
}

 <a href="#" class="skip-link">
        <svg class="icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag" />
        </svg>
</a>
<svg height="0" width="0">
    <symbol id="menu-bag" viewBox="-10 -10 20 20">
        <circle r="10" />
    </symbol>
</svg>

那么如果您需要支持旧版本的Firefox,该怎么办？您有两个选择,其中一个您已通过反复试验找出:

1. 避免使用svg标签选择器设置默认样式,并依赖于<use>元素的正常样式继承.

2. 使用有意选择阴影的选择器<svg>来取消默认值,同时确保它们在其他浏览器上具有预期效果.

一种选择是使用如下规则,这将保持原始规则对其他浏览器的特异性:

.skip-link .icon, .skip-link .icon use>svg {
    fill: green;
}

该use>svg选择不会匹配任何东西,除了与Firefox的错误,因此它是安全无副作用的使用.(最初,我刚刚建议添加svg到选择器的末尾,但在某些情况下这可能会有问题.)