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