对于Angular用户来说，"inline-svg-2" npm库非常有用:

https://www.npmjs.com/package/ng-inline-svg-2 将<img src="">替换为<div inlineSVG="path_to_assets"></div> 在屏幕的SCSS文件中设置CSS“color:” 在SVG图片中使用fill="currentColor"或stroke="currentColor"。

您现在可以动态配置CSS颜色，包括使用CSS变量，SVG将会适应。

注意:“currentColor”技巧只适用于内联svg，这就是为什么我们需要一个特殊的模块。

如果你想动态改变颜色:

在代码编辑器中打开SVG 添加或重写每个路径的填充属性为fill="currentColor" 现在，svg将采用你的字体颜色，所以你可以做一些像这样的事情: svg { 颜色:“红色”; ｝

简单地改变SVG文件的颜色:

转到SVG文件，在styles下面，在fill中提到颜色:

<style>.cls-1{fill: #FFFFFF;}</style>

如果使用一些技巧，可以用CSS改变SVG着色。 我为此写了一个小脚本。

浏览包含SVG图像的元素列表 将SVG文件加载为XML 只获取SVG部分 改变路径颜色 将src替换为修改后的SVG图像作为内联图像

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // Change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

上面的代码可能无法正常工作。我已经为带有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元素。

解决方案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%)的前缀，将其首先转换为黑色。

利与弊:

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

合适的如果:

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