我有一个在白色背景上绘制的SVG文件。
如果用户选择在黑色背景上显示,则呈现为黑色的所有路径都会消失。
是否可以更改SVG文件中以黑色呈现的所有元素,以便它们呈现白色?包括路径,文本等
SVG在浏览器中查看,所以如果可以在CSS和javascript中完成,我想这样做。
抱歉:SVG中有256种颜色。
我已经制作了如下测试svg:
<svg
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="fgc">
<stop stop-color="blue"/>
</linearGradient>
</defs>
<g id="layer1" >
<rect
style="stroke:url(#fgc);fill: none;"
id="rect10"
width="110"
height="75"
x="50"
y="55" />
</g>
</svg>
我在HTML页面中调用它:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="application/x-javascript">
var drg="";
var svgDoc="";
var svgItem="";
window.onload=function() {
drg = document.getElementById("drawing");
svgDoc = drg.contentDocument;
svgItem = svgDoc.getElementById("fgc");
console.log(svgItem.getAttribute("stop-color"));
svgItem.setAttribute("stop-color", "red");
console.log(svgItem.getAttribute("stop-color"));
};
</script>
</head>
<body>
<object id="drawing" data="drawing.svg" type="image/svg+xml" width="200" height="150"></object>
</body>
</html>
console.log(svgItem.getAttribute(“stop-color”))在svgItem.setAttribute(“stop-color”,“red”)和之后的“red”之前在浏览器控制台中输出“null”
矩形呈现蓝色。
在window.onload中将'stop-color'属性显式更改为红色将无法正常工作,因为已经加载了svg图形。如何在加载前将图形设置为红色渲染?
另外,我期待console.log(svgItem.getAttribute(“stop-color”))在更改之前给我'蓝色',但是它给了'null',这必须意味着我正在改变错误的属性。
答案 0 :(得分:0)
它可能。
如果用户选择在黑色背景上显示,则全部显示 呈现为黑色的路径消失。
当用户更改背景时,将类添加到svg的父级,如bg-black
。当用户将背景更改为白色时删除此类。
在CSS中,您可以更改颜色。
.bg-black svg path,
.bg-black svg circle {
stroke: white !important;
}
.bg-black svg text {
fill: white !important;
}