您如何从使用背景图像获取的包含文件中更改 svg 元素的颜色： url(“file-name.svg”);

Question

大家好，我有一堆包含 SVG 图像的 div

background-image : url("svg-file-path.svg");

和样本 SVG 文件

<svg xmlns="http://www.w3.org/2000/svg" width="42" height="30" viewBox="0 0 42 30">
    <g fill="none" fill-rule="evenodd">
        <g fill="#B4C9FF" stroke="#2C2C2C" stroke-width=".5">
            <path d="M954.263 146.25c-.368 3.826-.551 8.367-.551 13.625 0 5.292.186 10.585.558 15.879h0-41.004c.374-6.012.56-11.301.56-15.868 0-4.547-.184-9.092-.555-13.636h0z" transform="translate(-913 -146)"/>
        </g>
    </g>
</svg>

我需要在单击某些按钮时从 javascript 更改 SVG 图像的颜色。

1. 首先我怎么能拿SVG object？
   我试图为 SVG 文件提供 ID，但这没有用。
2. 如何更改 SVG object 的颜色

Answer 1

应用 CSS 过滤器，该过滤器引用带有 feColorMatrix 的 SVG 过滤器。 通过矩阵的第五列指定您想要的颜色。 例如，如果您想要 rgb(50,10,180)，通过除以 255（50/255、10/255、180/255）来统一这些值，您将得到以下过滤器：

CSS

.icon {
  filter: url(#recolorme); 
}

HTML

<svg height="0px" width="0px">
<defs>
  #ffff00
  <filter id="recolorme" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="0 0 0 0 0.196
                                         0 0 0 0 0.039
                                         0 0 0 0 0.706
                                         0 0 0 1 0"/>
  </filter>
</defs>
</svg>

Answer 2

这也可以完全在 css 中完成。

将规则filter: myStuffHere添加到带有背景图像的 css class 中。 您可以在此处使用此生成器选择任何颜色