How To Style Path Element In An External Svg File Used As Background Image?

I have a div with an background image assigned in my CSS. Its an svg file. Is there any possibility I can access the paths to change their color, even though its a background image

Solution 1:

I'm not aware of any way you can access paths of externally linked svg files (like in an img or object tags), but if you include the svg xml directly in your page you can access the paths, so you make a 2nd div with the same width, height & x, y position, give it a z-index below your foreground div and put the svg xml in side the background div you can simulate what you are trying to do.

Here's a jsfiddle showing how to use JQuery to load the svg image via get ajax request, change up the path styling and then embed the modified svg xml into the background div:

http://jsfiddle.net/webchemist/j2Dgq/

Edit

jsfiddle updated to work in IE9, the problem was the cross site ajax request to wikimedia not the inline svg...