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?

Sven
  • 12,997
  • 27
  • 90
  • 148
  • Check this, it might help you http://stackoverflow.com/questions/9529300/can-i-change-the-fill-color-of-an-svg-path-with-css – BackSlash Jan 26 '13 at 00:01

2 Answers2

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.

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

WebChemist
  • 4,393
  • 6
  • 28
  • 37
  • If you want to post your html + svg xml I could put together a fiddle specific for your case.... – WebChemist Jan 26 '13 at 00:08
  • It's possible to access the DOM of an svg if you use , – Erik Dahlström Jan 26 '13 at 10:39