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>
See Question&Answers more detail:os