如何更改SVG的路径颜色？ [英] How to change SVG's path color?
问题描述
更新：
是的，我知道SO上也有类似的问题，但解决方案也不起作用。
Update: Yes, I know there are similar questions on SO, but the solutions don't work either.
我想改变SVG的颜色，我的意思是路径的颜色，而不是内部的颜色，而不是路径本身。
I want to change SVG's color, I mean paths's color, not a color "inside" but the path itself.
我首先尝试使用css，但它不适用于所有。然后使用js，它几乎可以工作：
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>
我想将其更改为绿色。
<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>
上面的工作但是在路径上添加了边框。我也试过color，fillcolor，fill - 没什么用。
The above does "work" but adds a "border" to the path. I also tried with "color", "fillcolor", "fill" - nothing works.
更新II： SVG的来源：
<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>
推荐答案
fill 和/或 stroke 属性不会覆盖CSS样式（这就是为什么）。
The fill and/or stroke attribute on the path(s) do not override the CSS styling (here's why).
您需要做的是覆盖CSS样式本身，这可以通过设置<$ c来完成$ c> style property，例如
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" ...>
或在javascript中
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.
querySelector 方法只提供第一个匹配的元素（如果有的话），你想使用 querySelectorAll 方法，它将提供一个包含所有匹配元素的NodeList。
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');
}
正如我在我提到的那样注释， getSVGDocument（）方法可能不存在于你需要支持的所有浏览器上（我对你的要求一无所知，这只是一个抬头），你可能会感兴趣在 .contentDocument 属性如此处所述
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
这篇关于如何更改SVG的路径颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
