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 在其他浏览器中运行良好。

原文由 Gil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

规范说，重复使用的 <symbol> 应该像被嵌套的 <svg> 替换一样实施。 Firefox 过去常常在他们的 shadow DOM 中处理这个问题。 shadow 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>

WA 是这样实现的：

 <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 也是链接的后代。

正如罗伯特朗森在评论中指出的那样，这不是它 应该 如何工作的。这是 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 错误 之外的任何内容，因此可以安全使用而没有副作用。 （最初，我只是建议将 svg 添加到选择器的末尾，但这在某些情况下可能会出现问题。）

原文由 AmeliaBR 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为我解决的问题是在全球范围内添加以下 CSS：

 svg, symbol, defs {
   fill: inherit;
}

然后你可以设置你的 svg 的填充，它将适用。

原文由 Babak Karimi Asl 发布，翻译遵循 CC BY-SA 4.0 许可协议