如何使用css为svg图像选择颜色填充？ （不是内联svg）

Question

如何使用css为svg图像选择＆＃34; fill＆＃34; 的颜色？我有以下img标记：

<img src="assets/images/folder.svg" class="svg" >

我的.svg文件锁定如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 25 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-87.34,-350.89)">
        <g transform="matrix(1,0,0,0.947605,-375.66,-124.574)">
            <g id="Mail-Icon" serif:id="Mail Icon" transform="matrix(1,0,0,1.05529,-47.0001,-2366.53)">
                <path d="M532.5,2737L511.5,2737C510.672,2737 510,2736.33 510,2735.5L510,2719.5C510,2718.67 510.672,2718 511.5,2718L518.065,2718L518.065,2720L532.5,2720C533.329,2720 534,2720.67 534,2721.5L534,2735.5C534,2736.33 533.329,2737 532.5,2737ZM531,2724L531,2722.43L513,2722.44L513,2724L531,2724Z" style="fill:rgb(131,147,167);"/>
            </g>
        </g>
    </g>
</svg>

我试过这个，但它不起作用：

.svg {
    fill:rgb(18, 136, 222);
}

我已经看到了在HTML中添加svg代码的解决方案。虽然我正在寻找一种不需要添加svg内联的解决方案。

Answer 1

<img>和background-image的问题，您是不是像使用SVG inline或使用SVG一样使用CSS来控制SVG的内部结构作为<object>。

svg path {
  fill: red;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>Untitled-1</title><g id="Mail-Icon"><path d="M552,467.87H48a36,36,0,0,1-36-36v-384a36,36,0,0,1,36-36H205.56v48H552a36,36,0,0,1,36,36v336A36,36,0,0,1,552,467.87Zm-36-312V118.19l-432,.24v37.44Z"/></g></svg>

  

你可以read more about it here

Answer 2

在这里回答类似的问题：img src SVG changing the fill color

由于您无法使用CSS文件修改外部资源，并且使用<img>标记导入外部资源，因此如果不将.svg内容放入.html页面，则无法实现所需。

另一种选择是通过添加fill="rgb(18, 136, 222);"作为<path>标记的属性来直接修改svg代码：

<path fill="red" d="M532.5 …