I would like to change the fill color of all elements inside an SVG. The elements are both type rect and polygon. I have not set a default color.

Here is a sample file:

.svg

How can I do this most elegantly?

I would like to change the fill color of all elements inside an SVG. The elements are both type rect and polygon. I have not set a default color.

Here is a sample file:

http://www.kingoslo./instruments/test.svg

How can I do this most elegantly?

• javascript
• jquery
• svg
• fill

3 Answers 3

If you have jQuery:

$('svg').children().css('fill', '#ffffff');

EDIT: Note that this assumes the rects and polygons are the direct children of the svg element.

Another variant similar to the one by Robert Longson:

document.documentElement.style.fill = 'blue';

I prefer documentElement over rootElement because it's in DOM Core, and they're mostly the same.

This worked for me while working with a plex SVG having a lot of nested elements:

$('svg').find('path, text').css('fill', '#ffffff')