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

Question

如何使用 css 为 svg 图像 select 颜色 "fill"？ 我有以下 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 作为 [=] 那样使用 CSS 控制 SVG 的内部结构14=] 或使用 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>

You can 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 …

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

How to select the color fill for a svg image using css? (Not inline svg)

html

css

svg

fill

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