在SVG文件中更改背景时将笔划从黑色更改为白色

时间:2018-05-10 05:04:01

标签: css svg

我有一个在白色背景上绘制的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',这必须意味着我正在改变错误的属性。

1 个答案:

答案 0 :(得分:0)

它可能。

  

如果用户选择在黑色背景上显示,则全部显示   呈现为黑色的路径消失。

当用户更改背景时,将类添加到svg的父级,如bg-black。当用户将背景更改为白色时删除此类。

在CSS中,您可以更改颜色。

.bg-black svg path,
.bg-black svg circle {
  stroke: white !important;
}
.bg-black svg text {
  fill: white !important;
}