为什么样式无法应用于Firefox中的svg元素? [英] Why is style not applied to svg element in Firefox?

问题描述

我想将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中，圆圈为绿色(已应用样式)，在黑色中为圆圈(未应用样式).

查看并测试此小提琴.

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

解决方案

在SVG 2中，如果跨阴影元素边界.

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

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

让我们看看您的选择器.

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

I want to apply a CSS style to an SVG element that's inside a SVG <defs> element. While in Chrome and Internet Exporer (version 11) the following code works fine, in Firefox it doesn't. How can I apply the style to the SVG element inside the defs also in Firefox ?

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

I use the following CSS rule to style the SVG element:

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

While in chrome and Internet Explorer the circle is green (style is applied) in Firefox it's black (style not applied).

See and test with this fiddle.

I've searched at stackoverflow for "svg firefox style defs" but didn't find a answer to my question.

解决方案

In SVG 2 styles are not applied if they cross the shadow-element boundary.

The shadow tree is created by <use> elements and consists of the "shadows" of the elements (and their children) that the <use> element points to.

In other words if you have a complex selector (one that contains 2 or more elements) and one of those elements selects from the main document while the other selects within the use element's children, it is not going to be applied.

Let's look at your selector.

• symbolcontainer is in the main document
• mysymbol is in the shadow tree, it's cloned into the <use> element.

So that selector should do nothing in an SVG 2 compliant implementation.

If you want a style to apply simply set the selector to one or the other part so it does not cross the boundary. 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 implements this part of the SVG 2 specification, other browsers will likely catch up and implement it too at some point.

这篇关于为什么样式无法应用于Firefox中的svg元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！