我的答案是。但我不确定它是否对每个人都适用:

选择“svg”，然后选择“path”。然后你可以改变'fill'。

.eye-icon-container {
    width: 33px;
    height: 33px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    :hover {
      background-color: #ddf0ff;
    }
    :active {
      background-color: #1d398d;
      svg {
        path {
          fill: #fff;
        }
      }
    }
  }

只需在图像的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>

2020的答案

CSS过滤器适用于所有当前的浏览器

改变任何SVGs的颜色

Add the SVG image using an <img> tag. <img src="dotted-arrow.svg" class="filter-green"/> To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter: For example, output for #00EE00 is filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); Add the CSS filter into this class. .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }

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

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

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

我发现它有点笨拙，但它绝对是一种动态改变<img>标记中包含的SVG颜色的工作方式。

在SVG文件中，您可以通过以下方式添加CSS内容:

<svg ...>
    <defs>
        <style>
            ...
        <style>
    <defs>

在这里可以使用@media规则，SVG可以使用该规则查看自身以外的上下文环境。有一个宽高比媒体特性应用于SVG框(例如，<img>标记)。您可以通过稍微拉伸SVG框来为SVG创建不同的上下文。

通过这种方式，您还可以使favicon与网站上出现的SVG相同，但使用不同的颜色。(在这种情况下，其他SVG框不应该是方形的。)

/* img stretched horizontally (if SVG is square-shaped) */
@media (min-aspect-ratio: 1000/999) {
    path {
        fill: blue;
    }
}

/* img stretched vertically (if SVG is square-shaped) */
@media (max-aspect-ratio: 999/1000) {
    path {
        fill: green;
    }
}

/* img with exact sizes */
@media (aspect-ratio: 86/74) {
    path {
        fill: red;
    }
}

/* favicon with light browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: light) {
    path {
        fill: black;
    }
}

/* favicon with dark browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) {
    path {
        fill: white;
    }
}

有一点很重要

SVG必须包含viewBox信息，这样拉伸就不会影响图形。例子:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">

如果您有一个具有不同不透明度的单色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元素。