带有背景色的框元素上的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掩码

如果使用一些技巧，可以用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作为图像加载，则无法在浏览器中使用CSS或JavaScript更改它的显示方式。

如果你想改变你的SVG图像，你必须使用<object>， <iframe>或使用< SVG > inline加载它。

如果希望使用页面中的技术，则需要Modernizr库，在该库中可以检查SVG支持，并有条件地显示或不显示备用图像。然后可以内联SVG并应用所需的样式。

See:

#time-3-icon { fill: green; } .my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); } <svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/> </svg> <image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

您可以内联SVG。用类名(my-svg-alternate)标记你的备份映像:

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

在CSS中使用Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)的no-svg类来检查SVG支持。如果没有任何SVG支持，SVG块将被忽略，图像将被显示，否则图像将从DOM树中删除(display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

然后你可以改变你的内联元素的颜色:

#time-3-icon {
   fill: green;
}

我添加了一个测试页面-通过滤镜设置为SVG着色:

例如,

滤镜:反色(0.5)棕色(1)饱和(5)色相旋转(175度)

上传和着色您的SVG - Jsfiddle

我的想法来自:在图像标签SVGs上交换填充颜色

对于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。你不能对图像这么做……作为路径，你可以改变笔画和填充信息，你就完成了。比如Adobe Illustrator

所以，通过CSS，你可以覆盖路径填充值:

path { fill: orange; }

但是如果你想要一个更灵活的方式，因为你想要在有一些悬停效果的时候用文本改变它，使用:

path { fill: currentColor; }

body { background: #ddd; text-align: center; padding-top: 2em; } .parent { width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; } /*** desired colors for children ***/ .parent{ color: #000; background: #def; } .parent:hover{ color: #fff; background: #85c1fc; } .parent span{ font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; } .parent svg{ max-height: 26px; width: auto; display: inline; } /**** magic trick *****/ .parent svg path{ fill: currentcolor; } <div class='parent'> <span>TEXT WITH SVG</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32"> <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path> </svg> </div>