如何将 SVG 的填充颜色更改为背景图像？ [复制]

Question

我在 div 中有一个 SVG 作为背景图像。当我通过 JQuery 添加一个类“svg”时，我想改变这个 SVG 的填充颜色。

我该怎么做？

到目前为止，这是我的代码：

<!-- HTML -->
<div id="sg_lines"></div>

<!-- JS -->
$('.glyphs').on('click', function(e){
    $('#sg_lines').addClass('svg');
});

<!-- CSS -->
#sg_lines {
 position: absolute;
 z-index: 299;
 top: 0px;
 left: 0px;
 width: 1320px;
 height: 1080px;
 background-image: url('../../images/lines_foreground.png');
}

#sg_lines.svg img {
 fill: red;
}

谢谢

kay899

Answer 1

不过，您似乎有一个 .png 作为背景图像。

另外，恐怕当您将svg 作为<img> 标记的src 或background-image 时，您无法以编程方式更改其属性，例如填充。

您需要以某种方式重构您的代码，以便它使用 inline svg（即，您的 html 标记中的实际 svg 标记）。这样您就可以使用 CSS 来更改其属性。