css - 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>

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

我是否遗漏了一些关于 Firefox 如何填充 SVG 的明显信息？此 CSS 在其他浏览器中工作正常。

Answer 1

如果该行为是版本 56 之前的 Firefox 独有的，那是因为 #menu-bag指的是 <symbol>元素。

规范说明重新使用了 <symbol> should be implemented as if it were replaced by a nested <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>

是这样实现的:

<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规则(正如 Kyle Mitt 指出的那样，该规则将始终优先于您的 a:hover svg 规则)。 <use> 也继承了这个值元素。

然而，shadow-DOM <svg>没有获得继承的值，因为它是直接使用 svg 设置样式的规则。当您将选择器更改为 .skip-link svg 时，或者当你触发 a:hover svg规则，则隐藏的内部元素会直接应用样式，因为该 SVG 也是链接的后代。

正如 Robert Longson 在评论中指出的那样，这不是应该的工作方式。这是 Firefox 实现方式的副作用 <use>元素作为完整的克隆 DOM 树，恰好对您的 DOM 检查器隐藏。

这是您的原始问题的“有效”示例。也就是说，在 Chrome、Safari、Opera、Firefox 56+ 或 IE 上你会看到一个绿色圆圈，当你悬停它时它不会改变，但在 Firefox 56 之前你会看到一个蓝色圆圈，它会变成红色悬停/聚焦。

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 bug ，所以可以放心使用，没有副作用。 (最初，我只是建议将 svg 添加到选择器的末尾，但在某些情况下这可能会出现问题。)