Question

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

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

我使用以下CSS规则来设置SVG元素的样式：

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

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

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

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

Answer 1

在SVG中，如果他们cross the shadow-element boundary，则不会应用2个样式。

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

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

让我们来看看你的选择器。

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

因此，选择器在符合SVG 2的实现中不应执行任何操作。

如果您想要应用样式，只需将选择器设置为一个或另一个部分，使其不会越过边界。 E.g。

#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规范的这一部分，其他浏览器可能会在某些时候赶上并实现它。

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

1 个答案: