2

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?

Improve this question
1

2 Answers 2

Reset to default
3

You can add a 

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

instruction at the top of your SVG file, then define the styles in the stylesheet.

See http://www.w3.org/TR/SVG/styling.html#ReferencingExternalStyleSheets.

Improve this answer
0
0

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

Improve this answer
2
  • If you want to post your html + svg xml I could put together a fiddle specific for your case....
    – WebChemist
    Commented Jan 26, 2013 at 0:08
  • It's possible to access the DOM of an svg if you use <object>, <iframe> or <embed>, but not with <img> and background-image. Indirect manipulation of the latter two is of course possible, as you show here.
    – Erik Dahlström
    Commented Jan 26, 2013 at 10:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.