我发现它有点笨拙，但它绝对是一种动态改变<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掩码将导致:

body{ overflow:hidden; } .icon { --size: 70px; display: inline-block; width: var(--size); height: var(--size); transition: .12s; -webkit-mask-size: cover; mask-size: cover; } .icon-bike { background: black; animation: 4s frames infinite linear; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); } @keyframes frames { 0% { transform:translatex(100vw) } 25% { background: red; } 75% { background: lime; } 100% { transform:translatex(-100%) } } <i class="icon icon-bike" style="--size:150px"></i>

注意- Internet Explorer浏览器不支持SVG掩码

定位'svg'标签内的路径:

<svg>
   <path>....
</svg>

你可以内联，比如:

<path fill="#ccc">

Or

svg{
   path{
        fill: #ccc

你可以试着用这个css滤镜来给它上色:

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

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

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

如果使用一些技巧，可以用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背景图像的元素实现了这一点，其工作原理几乎类似于此。

但是无论如何，您必须修改这个脚本以适应您的情况。

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

利与弊:

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

合适的如果:

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