As demonstrated at http://jsfiddle.net/xMnea/4/ I have defined a symbol that contains multiple elements, each with its own class attribute. In the main body I use the symbol multiple times. I am using in-line CSS to style each use individually.
In Firefox 15 this works as expected, but in IE9 and Chrome, I get black squares. It appears that the latter browsers don’t detect/recognise the class definitions within the symbol. They work as expected if the structure is in-line (bottom right square).
Is this simply a case of Firefox being more compliant than the others, or is there a better way to achieve reuse of SVG elements while allowing individual styling?
extra info: The same problem occurs if I use “defs” rather than symbol, or if I use external style sheets rather than in-line.
I’m afraid it’s Firefox is less compliant due to https://bugzilla.mozilla.org/show_bug.cgi?id=265894
If you want reuse and individual styling there’s a javascript approach that may eventually be implemented natively by UAs here