SVG Stylesheets don't work in Chrome and Firefox
When you reference an SVG image from a CSS background-image property in an HTML page AND said SVG image contains its own CSS file reference (either via an xhtml:link or xml-stylesheet) IE9 renders the SVG with all the styles correctly, but the latest Chrome and Firefox do not.
After some network sniffing it appears that the stylesheets don't even get requested.
Interestingly, if you load the SVG file up into a window of its own, the style is applied - so the problem only occurs when the SVG is references as a background-image in an html page.
As a workaround I wrote a server-side function that draws the SVG to the page. This makes the SVG inline, so it can be manipulated using the page's own style-sheet!
This obviously increases the amount of HTML that needs to be loaded when the page is first loaded, but as my solution is Ajax-based, there is only one page load so the performance hit happens as the program is first loaded in the browser and not every time an action is performed.
Broken behaviour found in:
Chrome 24.0.1312.57 m Firefox 18.0.2
Works on:
Internet Explorer 9
