Javascript 如何更改SVG';什么是路径颜色?
更新: 是的,我知道在这方面也有类似的问题,但解决方案也不起作用 我想改变SVG的颜色,我指的是路径的颜色,不是“内部”的颜色,而是路径本身 我第一次尝试css,它根本不起作用。然后使用js,它几乎可以工作: 这是可行的,即加载图像。默认为黑色Javascript 如何更改SVG';什么是路径颜色?,javascript,svg,Javascript,Svg,更新: 是的,我知道在这方面也有类似的问题,但解决方案也不起作用 我想改变SVG的颜色,我指的是路径的颜色,不是“内部”的颜色,而是路径本身 我第一次尝试css,它根本不起作用。然后使用js,它几乎可以工作: 这是可行的,即加载图像。默认为黑色 <object id = 'test' data="images/icons/040__file_delete.svg" type="image/svg+xml"></object> 我想把它换成绿色 <scr
<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>
$(函数(){
document.getElementById(“测试”).addEventListener(“加载”,函数)(){
var doc=this.getSVGDocument();
console.log(doc);//工作正常
var p=doc.querySelector(“路径”);//有效
p、 setAttribute(“笔划”、“绿色”);
});
})
上述操作确实“有效”,但会在路径中添加一个“边框”。我还尝试了“颜色”、“填充颜色”、“填充”-没有任何效果
更新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>
.st0{fill:#231815;}
这里发生的事情是,对象不是一条简单的路径,但实际上整个“笔划”已转化为一个大对象。当您从各种图形应用程序导出具有奇特(或不太奇特)笔刷设置的对象时,可能会发生这种情况。您也可以使用Adobe Illustrator,IIRC中的大纲功能获得相同的结果
要避免这种情况,请在原始插图软件中编辑原始对象,然后尝试以下操作:
路径上的
fill
和/或stroke
属性不会覆盖CSS样式()
您需要做的是覆盖CSS样式本身,这可以通过设置style
属性来完成,例如
<path style="fill:green" ...>
在您对我的评论的回复中,您提到您将解决“单一路径”问题,为了提供一个例子,这里是为什么以及如何解决它
querySelector
方法仅提供匹配的第一个元素(如果有),如果要使用querySelectorAll
方法,该方法将提供包含所有匹配元素的节点列表
var paths = doc.querySelectorAll("path"),
i;
for (i = 0; i < paths.length: ++i) {
paths[i].setAttribute('style', 'fill:green');
}
var path=doc.querySelectorAll(“路径”),
我
对于(i=0;i
正如我在评论中提到的,
getSVGDocument()
方法可能并不存在于您需要支持的所有浏览器上(我对您的要求一无所知,这只是一个提示),您可能对.contentDocument
属性感兴趣,基于公认的答案,我创建了一个示例来单击按钮并更改颜色路径
重要事项:
我需要主机HTML文件到Web服务器(IIS)来运行它。如果不是,则它a.contentDocument
始终返回null
我和你一样关心谁
var-svgDoc;
函数changeColor(){
svgDoc=a.contentDocument;
//通过id获取内部元素
var path=svgDoc.querySelectorAll(“路径”);
//添加行为
对于(i=0;i
文件
变色
笔划
是路径的“边框”。或者你想要一个填充或者一个笔划,你已经提到了这两个,所以我看不出你想要完成什么。你能把它放到一个代码段中,这样我们就可以看到问题了吗?(我还认为使用object
标记,您需要向svg添加style
元素,我不知道jQuery可以读取这个阴影DOM)笔划是路径的彩色版本。@something这里不是,路径描述了图像的实际轮廓,因此,要设置的属性是fill
而不是stroke
@konradè关于颜色更改不起作用的原因是元素属性fill
实际上没有覆盖css样式,这可以使用setAttribute('style','fill:green')
来实现。你会遇到的另一个问题是,<>代码> GETSVGDebug 在所有浏览器中都是不可用的,所以你可以考虑使用内联SVG(但是可能有一个你不这样做的原因)。@ RogierSpieker,我并没有说他设置了错误的属性,但是路径,当抚摸时,恰好是笔划。我没说这是路径的填充版本。我不得不说,将它作为一个常规的svg
元素而不是一个对象,这确实是一个不错的选择,但较旧的浏览器(主要是IE)对它的使用并不好。但是,是的,如果它在文档中,那么只使用css就可以很容易地调整它。@something这里很抱歉,我读它的时候好像stroke
会产生现在可见的东西,但它会“勾勒出轮廓”(因为路径将轮廓描述为填充形状)。考虑我的改正;有关大纲功能的说明,请参见此问题
var paths = doc.querySelectorAll("path"),
i;
for (i = 0; i < paths.length: ++i) {
paths[i].setAttribute('style', 'fill:green');
}