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