为什么 style 不应用于 Firefox 中的 svg 元素?

Question

我想将CSS样式应用于SVG<defs>元素内的SVG元素。虽然在Chrome和Internet Exporer(版本11)中，以下代码工作正常，但在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中，圆圈是黑色的(样式未应用)。

用这个小提琴查看和测试。

我已经在stackoverflow上搜索了"svg Firefox style defs"，但没有找到我问题的答案。

Answer 1

在 SVG 2 中，如果样式跨越阴影元素边界，则不会应用它们。

影子树由<use>元素创建，由<use>元素指向的元素(及其子元素)的"影子"组成。

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

让我们看看你的选择器。

• 符号容器位于主文档中
• 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 规范的这一部分，其他浏览器可能会在某个时候赶上并实现它。