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

【问题标题】：Changing the stroke from black to white on changing background in SVG files在 SVG 文件中更改背景时将笔划从黑色更改为白色
【发布时间】：2018-05-27 14:44:40
【问题描述】：

我有一个在白色背景上绘制的 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") 之前在浏览器控制台中打印“null”，之后打印“red” .

矩形呈现为蓝色。

显然在 window.onload 中将 'stop-color' 属性更改为红色将不起作用，因为 svg 图形已经加载。如何将我的图形设置为在加载前呈现红色？

另外，我希望 console.log(svgItem.getAttribute("stop-color")) 在更改之前给我“蓝色”，但它给了我“null”，这一定意味着我正在更改错误的属性。

【问题讨论】：

您能否进一步详细说明 SVG 要求？具体来说，调色板是仅限于白色还是存在其他颜色？

标签： css svg

【解决方案1】：

有可能。

如果用户选择在黑色背景上显示，那么所有呈现为黑色的路径消失了。

当用户更改背景时，向 svg 的父级添加一个类，例如 bg-black 。当用户将背景更改为白色时删除此类。

在 CSS 中，您可以像这样更改颜色。

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

【讨论】：

谢谢。我认为我在 HTML <svg class="bg-black" xlink:href="17_425.svg" /> 中调用 svg 文件？但是，这会将所有颜色变为白色吗？
我怀疑我的代码是否适用于通过 xlink:href 加载的 svg！
好的，你将如何实现它？我怀疑您的代码会将所有笔触颜色更改为白色。是这样吗？是否可以将“黑色”重新定义为另一种颜色？如果我使用'fgcolour'而不是'black'，我可以通过css定义'fgcolour'的值吗？