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

Posted 2023-03-06

【中文标题】如何将 SVG 的填充颜色更改为背景图像？ [复制]

【英文标题】：How to change fill color for SVG as background-image? [duplicate]

【发布时间】：2016-12-27 13:35:09

【问题描述】：

我在 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

【参考方案1】：

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

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

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

【讨论】：

那么，真的没有办法像我的设置那样使用它吗？