Update: Yes, I know there are similar questions on SO, but the solutions don't work either.
I want to change SVG's color, I mean paths's color, not a color "inside" but the path itself.
I first tried with css, it did not work at all. Then with js, and it almost work:
This works, that is, an image is loaded. It's black by default.
<object id = 'test' data="images/icons/040__file_delete.svg" type="image/svg+xml"></object>
I want to change it to green.
<script>
$(function(){
document.getElementById("test").addEventListener("load", function() {
var doc = this.getSVGDocument();
console.log(doc);//works fine
var p = doc.querySelector("path"); //works
p.setAttribute("stroke", "green");
});
})
</script>
The above does "work" but adds a "border" to the path. I also tried with "color", "fillcolor", "fill" - nothing works.
Update II: The SVG's source:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="图层_1" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
<style type="text/css">
.st0{fill:#231815;}
</style>
<g>
<g>
<g>
<g>
<g>
<path class="st0" d="M13,17.5H5c-1.4,0-2.5-1.1-2.5-2.5V3c0-1.4,1.1-2.5,2.5-2.5h3.6c0.4,0,0.8,0.2,1.1,0.4l5.4,5.4 c0.3,0.3,0.4,0.7,0.4,1.1V15C15.5,16.4,14.4,17.5,13,17.5z M5,1.5C4.2,1.5,3.5,2.2,3.5,3v12c0,0.8,0.7,1.5,1.5,1.5h8 c0.8,0,1.5-0.7,1.5-1.5V7.4c0-0.1-0.1-0.3-0.1-0.4L8.9,1.6C8.8,1.6,8.7,1.5,8.6,1.5H5z" fill="green"/>
</g>
<g>
<path class="st0" d="M15,7.5h-4C9.6,7.5,8.5,6.4,8.5,5V1c0-0.3,0.2-0.5,0.5-0.5S9.5,0.7,9.5,1v4c0,0.8,0.7,1.5,1.5,1.5h4 c0.3,0,0.5,0.2,0.5,0.5S15.3,7.5,15,7.5z"/>
</g>
</g>
<g>
<g>
<path class="st0" d="M10.5,13.9c-0.1,0-0.3,0-0.4-0.1l-3-3C7,10.5,7,10.2,7.1,10s0.5-0.2,0.7,0l3,3c0.2,0.2,0.2,0.5,0,0.7 C10.8,13.8,10.6,13.9,10.5,13.9z"/>
</g>
<g>
<path class="st0" d="M7.5,13.9c-0.1,0-0.3,0-0.4-0.1C7,13.5,7,13.2,7.1,13l3-3c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7l-3,3 C7.8,13.8,7.6,13.9,7.5,13.9z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
stroke
is a 'border' for a path. Either you want a fill or a stroke, and you have mentioned both, so I don't see what you want to accomplish. Can you put this into aSO snippet
so we can see the problem? (Also I think that withobject
tags, you need to add astyle
element to the svg, I wasn't aware jQuery could read this shadow DOM)fill
notstroke
. @konrad_firm As to why the color change is not working is that the element attributefill
does not actually override the css style, this can be done usingsetAttribute('style', 'fill: green')
. Another issue you will run into is thatgetSVGDocument
is not available in all browsers, so you could consider using inline SVG (but there is probably a reason you don't do this).svg
element instead of an object is really the way to go, but older browsers (mostly IE) don't play nice with it. But yeah, if it's in the document, then it is easy to adjust it using just css.stroke
would produce what is visible now, but it would 'outline the outline' (as the paths describe the outlines as filled shaped). Consider me corrected ;-)