6

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 ?

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

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 an answer to my question.

1
  • #mysymbol { fill: green; } works for me in FF, i would assume that maybe the svg might be rendering slightly differently and because of this your style declaration is incorrect? Commented Jan 21, 2018 at 13:13

1 Answer 1

8

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.