How to change SVG's path color?

The fill and/or stroke attribute on the path(s) do not override the CSS styling (here's why).

What you need to do is override the CSS styling itself, this can be done by setting the style property, e.g.

<path style="fill:green" ...>

Or in javascript

element.setAttribute('style', 'fill: green');

In your response to my comment you mentioned you'd address the 'single path' issue, in order to provide an example for that too here's why and how to fix it.

The querySelector method only provides the first element (if any) that matches, you want to use the querySelectorAll method, which will provide a NodeList containing all matching elements.

var paths = doc.querySelectorAll("path"),
    i;

for (i = 0; i < paths.length: ++i) {
    paths[i].setAttribute('style', 'fill:green');
}

As I mentioned in my comment, the getSVGDocument() method may not exist on all browsers you need to support (I know nothing about your requirements, this is just a heads up), you may be interested in the .contentDocument property as described here

Tags:

Javascript

Svg