为什么样式不适用于 Firefox 中的 svg 元素？答案

【问题标题】：Why is style not applied to svg element in Firefox?为什么样式不适用于 Firefox 中的 svg 元素？
【发布时间】：2018-06-30 05:27:40
【问题描述】：

我想将 CSS 样式应用于 SVG <defs> 元素内的 SVG 元素。在 Chrome 和 Internet Explorer（版本 11）中，以下代码可以正常工作，但在 Firefox 中却不行。如何在 Firefox 中也将样式应用于 defs 内的 SVG 元素？

#symbolcontainer.green #mysymbol { fill: green; }

<svg>
    <g id="symbolcontainer" class="green">
        <defs>
            <g id='mysymbol'>
                <defs>
                    <circle id="myCircle" r="2" cx="2" cy="2"/>
                </defs>
                <use href="#myCircle"/>
            </g>
        </defs>
        <use href="#mysymbol" />
    </g>
</svg>

在 chrome 和 Internet Explorer 中，圆圈为绿色（已应用样式），在 Firefox 中为黑色（未应用样式）。

查看并使用此fiddle 进行测试。

我在 stackoverflow 上搜索了“svg firefox style defs”，但没有找到我的问题的答案。

【问题讨论】：

#mysymbol { fill: green; } 在 FF 中为我工作，我认为 svg 的渲染可能略有不同，因此您的样式声明不正确？

标签： css firefox svg shadow-dom

【解决方案1】：

如果cross the shadow-element boundary，则不会应用 SVG 2 样式。

阴影树由<use> 元素创建，由<use> 元素指向的元素（及其子元素）的“阴影”组成。

换句话说，如果您有一个复杂的选择器（一个包含 2 个或更多元素）并且其中一个元素从主文档中选择，而另一个在 use 元素的子元素中选择，则不会应用它。

让我们看看你的选择器。

symbolcontainer 在主文档中
mysymbol 在影子树中，它被克隆到 <use> 元素中。

所以选择器在符合 SVG 2 的实现中应该什么都不做。

如果您想应用一种样式，只需将选择器设置为一个或另一个部分，这样它就不会越界。例如

#symbolcontainer.green { fill: green; }

<svg viewBox="0 0 5 5">
    <g id="symbolcontainer" class="green">
        <defs>
            <g id='mysymbol'>
                <defs>
                    <circle id="myCircle" r="2" cx="2" cy="2"/>
                </defs>
                <use href="#myCircle"/>
            </g>
        </defs>
        <use href="#mysymbol" />
    </g>
</svg>

Firefox 实现了 SVG 2 规范的这一部分，其他浏览器可能会在某个时候赶上并实现它。

【讨论】：