未在 FireFox 中应用 SVG 填充 [英] SVG Fill not being applied in FireFox

问题描述

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

I can't seem to figure out why Firefox is using the default svg fill color instead of the class's fill.

这是查看 FF 检查器时的 3 个填充:

Here are the 3 fills when viewing the FF inspector:

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 那么它就可以正常工作.为什么我不能使用类而是显式声明元素??

It should be showing the .skip-link .icon fill of white (#fff) but it's actually using the SVG fill of #002649; If i change .skip-link .icon to .skip-link svg then it works fine. Why can I not use a class and instead but explicitly state the element??

我是否遗漏了一些关于 Firefox 如何填充 SVG 的明显信息?此 CSS 在其他浏览器中运行良好.

Am I missing something obvious about how Firefox fills an SVG? This CSS works fine in other browsers.

推荐答案

如果该行为在 56 版之前是 Firefox 独有的，那是因为 #menu-bag 引用了 <符号> 元素.

If the behavior was unique to Firefox prior to version 56, it was because #menu-bag refers to a <symbol> element.

规范说重用了 应该像被嵌套的 替换一样实现.Firefox 曾经在他们的 shadow DOM 中逐字地对待它.shadow DOM 在您的 DOM 检查器中不可见，但它受 CSS 选择器的约束.

The specs say that a re-used <symbol> should be implemented as if it were replaced by a nested <svg>. Firefox used to treat this literally in their shadow DOM. The shadow DOM isn't visible in your DOM inspector, but it is subject to CSS selectors.

这意味着这段代码:

<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 规则).此值也由 元素继承.

The svg.icon matches your .skip-link .icon rule (and as Kyle Mitt points out, that rule will always take precedence over your a:hover svg rule). This value is also inherited by the <use> element.

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

However, the shadow-DOM <svg> doesn't get the inherited value, because it is styled directly with the svg rule. When you change your selector to .skip-link svg, or when you trigger the a:hover svg rule, then the hidden inner element gets the style directly applied because that SVG is also a descendent of the link.

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

As Robert Longson noted in the comments, this is not how it is supposed to work. It's a side effect of the way that Firefox implemented <use> elements as complete cloned DOM trees, which just happened to be hidden from your DOM inspector.

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

Here's a "working" example of your original problem. Which is to say, on Chrome, Safari, Opera, Firefox 56+ or IE you will see a green circle that isn't altered when you hover it, but on Firefox prior to version 56 you will see a blue circle that turns red on hover/focus.

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，您该怎么办?您有两种选择，其中一种您已经通过反复试验找到了:

So what to do you if you need to support old versions of Firefox? You have two options, one of which you've already figured out by trial and error:

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

1. Avoid setting default styles using the svg tag selector, and rely on normal style inheritance from the <use> element.

使用有意选择阴影的选择器- 取消默认设置，同时确保它们对其他浏览器具有预期效果.

Use selectors that intentionally select the shadow-<svg> to cancel out the defaults, while also making sure that they have the intended effect on other browsers.

一种选择是使用如下规则，这样可以保持原始规则对其他浏览器的特殊性:

One option would be to use a rule like the following, which would maintain the specificity of your original rule for other browsers:

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

use>svg 选择器永远不会匹配任何除了与Firefox 错误，因此可以安全使用，没有副作用.(最初，我只是建议将 svg 添加到选择器的末尾，但这在某些情况下可能会出现问题.)

The use>svg selector will never match anything except with the Firefox bug, so it is safe to use without side effects. (Originally, I'd just suggested adding svg to the end of the selector, but that could be problematic in certain situations.)

这篇关于未在 FireFox 中应用 SVG 填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！