只需在图像的svg标签中添加fill:"desiredColor"即可: 例子:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

如果您有一个具有不同不透明度的单色SVG，您只是想将其着色为不同的颜色，那么可以使用另一种方法:feFlood SVG过滤器。

然而，这个解决方案不像单行CSS那样简单:

它适用于img元素中的svg。 这根本不需要编辑源SVG。 它允许您简单地为SVG选择目标颜色，而不用担心复杂的颜色转换，如色调旋转。

这里有一个例子:

<svg xmins =“http://www.w3.org/2000/svg”width= 0“height= 0”> < defs > <滤镜id=“滤镜”=“用户空间”> <feFlood flood-color="aquamarine" result="flood" /> <feComposite in="洪水" in2="SourceAlpha"运营商="in" /> <过滤器- > < / defs > < / svg > <img style=“过滤器::url: recolourFilter);“width=" src " src=“https://upload.wikimedia.org/wikipedia/commons/commons/vs_vs_svg.svg”

在上面的示例中，我们创建了一个内联SVG来定义过滤器，然后将其应用于图像。在<filter>块中，我们首先通过<feFlood>定义我们想要的填充颜色，然后我们使用源的alpha通道和泛洪颜色创建一个合成图像。最后，通过img元素上的filter CSS属性对整个图像应用过滤器。

我是从Smashing杂志的一篇文章中学到这个技巧的。如果您想了解更多关于SVG筛选器的知识，强烈推荐阅读这本书。

还有一些需要注意的事情:

这个过滤器可以通过CSS filter属性应用于任何HTML元素。 同一过滤器可以在同一页面上重复使用多次。 如果您使用的是内联SVG，则<defs>块可以构成SVG元素的一部分，而过滤器仍然可以应用于整个SVG或选择性元素。这避免了过滤器需要单独的SVG元素。

一个很好的方法是使用mixin来控制笔画颜色和填充颜色。我的“svg”被用作图标。

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;

        circle, line, path {
            fill: $color
        }

        &:hover {
            fill: $hoverColor;

            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

然后你可以在你的SCSS文件中执行以下操作:

.container {
    @include icon(white, blue);
}

我的用法是引导图标，复制您的SVG路径。

span{
    path{
        color: red;
    }
}

SVG引导的一个例子:

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
          <path
            d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" />
          <path
            d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
        </svg>

如果你想对一个内联SVG文件这样做，也就是说，例如，CSS内容中的背景图像:

背景:url(“数据:photo /svg+xml;charset=utf8，%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);

当然，替换…使用您的内联图像代码。

解决方案1 -编辑SVG指向currentColor

<svg>... fill: currentColor stroke: currentColor ...</svg>

然后你可以从你的CSS内容中控制笔画和填充的颜色:

svg {
  color: blue; /* Or any color of your choice. */
}

利与弊:

简单，使用常规支持的CSS。

合适的如果:

你可以控制SVG SVG可以内联包含在HTML中。

解决方案2 - CSS掩码属性

<i class="icon"></i>

  .icon {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-image: url(https://url.of.svg/....svg);
    mask-image: url(https://url.of.svg/....svg);
    background-color: blue; /* Or any color of your choice. */
    width: 20px;
    height: 20px;
  }

}

利弊

相对容易使用 浏览器对掩码CSS属性的支持是部分的。

合适的如果:

SVG是外部的，通过URL包含 意味着在现代已知的浏览器上使用。

解决方案3 - CSS过滤器属性-静态颜色

如果预先知道颜色，可以使用https://codepen.io/sosuke/pen/Pjoqqp找到将SVG更改为所需颜色所需的筛选器。例如，将svg转换为#00f:

<img src="https://url.of.svg/....svg" class="icon">

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
}

如果你的原始颜色不是黑色，在滤镜列表中加上亮度(0)饱和度(100%)的前缀，将其首先转换为黑色。

利与弊:

可能会有一个小的，不显著的差异之间的结果和期望的颜色。

合适的如果:

想要的颜色是预先知道的。 外部形象