Why is style not applied to svg element in Firefox?

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/48367069/why-is-style-not-applied-to-svg-element-in-firefox

标签

css

firefox

svg

shadow-dom