>更新:是的,我知道SO上有类似的问题,但解决方案也不起作用。
我想改变SVG的颜色,我的意思是路径的颜色,不是"内部"的颜色,而是路径本身。
我第一次尝试使用 css,它根本不起作用。然后使用 js,它几乎可以工作:
这有效,即加载图像。默认情况下它是黑色的。
<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>
上面确实"有效",但为路径添加了"边框"。我也尝试了使用"颜色"、"填充颜色"、"填充"——没有任何效果。
更新二: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 样式(原因如下)。
您需要做的是覆盖CSS样式本身,这可以通过设置style
属性来完成,例如
<path style="fill:green" ...>
或者在JavaScript中
element.setAttribute('style', 'fill: green');
在你对我的评论的回应中,你提到你会解决"单路径"问题,为了提供一个示例,这也是为什么以及如何解决它。
querySelector
方法仅提供匹配的第一个元素(如果有),您希望使用 querySelectorAll
方法,该方法将提供包含所有匹配元素的 NodeList。
var paths = doc.querySelectorAll("path"),
i;
for (i = 0; i < paths.length: ++i) {
paths[i].setAttribute('style', 'fill:green');
}
正如我在评论中提到的,您需要支持的所有浏览器上都不存在getSVGDocument()
方法(我对你的要求一无所知,这只是一个提醒),你可能对这里描述的.contentDocument
属性感兴趣
这里发生的事情是,对象不是一个简单的路径,而是实际上整个"笔触"已经变成了一个大对象。当您从各种绘图应用程序中输出具有花哨(或不那么花哨)画笔设置的对象时,可能会发生这种情况。您还可以使用 Adobe Illustrator, IIRC 中的"大纲"功能获得相同的结果。
为避免这种情况,请在原始插图软件中编辑原始对象并尝试以下操作:
- 使用简单的笔触,没有画笔。这可能会起作用。
- 在原始编辑器中不使用笔划,并在 SVG 中使用 JS 或 CSS 应用它。
根据接受的答案,我创建了单击按钮和更改颜色路径的示例。
重要事项:
我需要主机HTML文件到网络服务器(IIS)来运行它。如果不是,则a.contentDocument
始终返回 null。
我为谁关心。
var svgDoc;
function changeColor() {
svgDoc = a.contentDocument;
// get the inner element by id
var paths = svgDoc.querySelectorAll("path");
// add behaviour
for (i = 0; i < paths.length; i++) {
paths[i].setAttribute('style', 'fill:pink');
}
}
var a = document.getElementById("alphasvg");
// It's important to add an load event listener to the object,
// as it will load the svg doc asynchronously
a.addEventListener("load", function () {
// get the inner DOM of alpha.svg
svgDoc = a.contentDocument;
// get the inner element by id
var paths = svgDoc.querySelectorAll("path");
// add behaviour
for (i = 0; i < paths.length; i++) {
paths[i].setAttribute('style', 'fill:green');
}
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<object data="test.svg" type="image/svg+xml" id="alphasvg"></object>
<button onclick="changeColor()">Change Color</button>
<script>
</script>
</body>
</html>
如果我知道你想为路径的笔触着色很简单:将描边属性添加到 SVG 路径,然后应用颜色(RGB 或十六进制或 HSL)
<math fill="none" stroke: rgb(0,0,0) d="M50 30 L50 -10 C50 -10 90 -10 90 30 Z" />