使用滤镜转换为任何颜色。

我最近发现了这个解决方案，希望有人能使用它。 由于该解决方案使用过滤器，它可以用于任何类型的图像。不仅仅是svg。

如果你有一张单色图像，你只是想改变它的颜色，你可以在一些滤镜的帮助下做到这一点。当然，它也适用于多色图像，但你不能针对特定的颜色。只有整个图像。

过滤器来自于如何仅使用CSS过滤器将黑色转换为任何给定颜色中提出的脚本 如果您想将白色更改为任何颜色，您可以在每个过滤器中调整反转值。

.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color: <br/> <div class="startAsBlack black-green"></div> <div class="startAsBlack black-red"></div> <div class="startAsBlack black-blue"></div> <div class="startAsBlack black-purple"></div>

简单. .

你可以使用下面的代码:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

首先指定svg的路径，然后写入它的ID，在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。

在css中:

.logo {
  fill: red;
}

为了扩展@gringo的答案，在其他答案中描述的Javascript方法是有效的，但需要用户下载不必要的图像文件，而且在我看来，它会膨胀你的代码。

I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used Fort Awesome in the past, and it works great to combine your custom icons/images in SVG format, along with any 3rd party icons you may be using (Font Awesome, Bootstrap icons, etc.) into a single webfont file the user has to download. You can also customize it, so you only include the 3rd party icons you're using. This reduces the number of requests the page has to make, and you're overall page weight, especially if you're already including any 3rd party icons libraries.

如果你更喜欢一个更面向开发的选项，你可以谷歌"npm svg webfont"，并使用一个最适合你的环境的节点模块。

一旦你完成了这两个选项中的任何一个，那么你就可以很容易地通过CSS改变颜色，而且很可能，你已经在这个过程中加快了你的网站。

如果你的形状总是一种纯色，而且你有两个以上的纯色，你可以使用Fontello，用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例，这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何，如果你没有听说过Fontello，你需要去了解一下。如果你知道一个类似的更好的解决方案，我很想知道。

可能的失败:

众所周知，图标/形状字体会干扰屏幕阅读器，所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔，在创建和导出形状时可能需要一些尝试和错误。 避免任何和所有分组，只使用单一的非嵌套复合形状。

编辑您的SVG文件，将fill="currentColor"添加到SVG标记中，并确保从文件中删除任何其他填充属性。

例如:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

注意，currentColor是一个关键字(不是使用的固定颜色)。

在此之后，您可以使用CSS更改颜色，通过设置元素的颜色属性或从它的父元素。

例子:

.div-with-svg-inside {
    color: red;
}

我忘了说，你必须这样插入SVG:

<svg>
   <use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>

如果image来自某个变量，那么

<svg>
  <use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>

Note that `#img` is the id of the `svg` tag inside svg file. Also note `xlink:href` has been deprecated instead you should use `href` or use can use both to support older browser versions.

Another way of doing it: [https://css-tricks.com/cascading-svg-fill-color/][1]


  [1]: https://css-tricks.com/cascading-svg-fill-color/

尝试纯CSS:

.logo-img {
  /* to black */
  filter: invert(1);
  /* or to blue */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

更多信息请参见本文https://blog.union.io/code/2017/08/10/img-svg-fill/