您可以使用亮度过滤器，任何大于1的值使元素更亮，任何小于1的值使元素更暗。因此，我们可以将这些浅色SVG设为深色，反之亦然，例如，这将使SVG变暗:

filter: brightness(0);

为了改变颜色和亮度级别，我们可以使用暗色滤镜和色调旋转，亮度，例如:

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

如果你试图使用和SVG直接在CSS与url()像这样;

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

您应该将#编码为%23，否则它将不起作用。

<svg fill="%23FFF" ...

实现这一点的一种方法是从某种服务器端机制提供svg。 只需创建一个资源服务器端，根据GET参数输出svg，并在某个url上提供它。

然后在css中使用这个url。

因为作为一个背景img，它不是DOM的一部分，你不能操作它。 另一种可能是定期使用它，以正常的方式将它嵌入到页面中，但绝对定位它，使它成为一个页面的全宽和高，然后使用z-index css属性将它放在页面上所有其他DOM元素的后面。

我需要一些类似的东西，并想坚持使用CSS。这里有LESS和SCSS mixins以及普通的CSS，可以帮助你做到这一点。不幸的是，它的浏览器支持有点松懈。有关浏览器支持的详细信息，请参见下面。

更少的混合:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

更少的使用方法:

.element-color(#fff);

SCSS混合:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS用法:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

这里有更多关于将完整的SVG代码嵌入到CSS文件中的信息。它还提到浏览器兼容性有点太小，这是一个可行的选择。

使用暗色滤镜以及色调旋转、亮度和饱和度来创建任何我们想要的颜色。

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

你可以使用CSS掩码，使用'mask'属性，你可以创建一个应用于元素的掩码。

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

欲了解更多内容，请参阅这篇伟大的文章:https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images