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

Question

我在div中有一个SVG作为背景图像。当我添加一个类＆＃34; svg＆＃34;通过JQuery我想改变这个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>标记或background-image的src时，你无法以编程方式更改其属性，例如作为填充。

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