如何更改svg元素的颜色？

我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我把这个放在CSS中，但我的图像总是黑色的，无论如何。

我的代码：

.change-my-color {fill: green;}
<svg><image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /></svg>

2069269 次浏览
小开
最佳答案

您不能以这种方式更改图像的颜色。如果您将SVG加载为图像，则无法在浏览器中使用CSS或Javascript更改它的显示方式。

如果要更改SVG映像，则必须使用<object>、<iframe>或<svg>内联加载它。

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

见：

#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-206C462,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,161C417,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.505c-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.081c0.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的颜色，您可以直接将svg代码更改为在任何文本编辑器中打开svg文件。代码可能如下所示

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><g><path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223C181.113,454.921,171.371,464.663,161.629,474.404z"/>/*Some more code goes on*/</g></svg>

您可以观察到有一些XML标签，如路径、圆、多边形等。在那里，您可以在样式属性的帮助下添加自己的颜色。请看下面的例子

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223C181.113,454.921,171.371,464.663,161.629,474.404z"/>

将style属性添加到所有标签，以便您可以获得所需颜色的SVG

编辑：根据Daniel的评论，我们可以直接使用填充属性而不是样式属性中的填充元素

小开

最简单的方法是使用https://icomoon.io/app/#/select之类的服务从SVG中创建字体。上传您的SVG，单击“生成字体”，将字体文件和css包含在您的身边，然后像任何其他文本一样使用和设置样式。我总是这样使用它，因为它使样式更容易。

编辑：正如@CodeMouse92评论的文章中提到的，图标字体会扰乱屏幕阅读器（并且可能对SEO不利）。所以宁愿坚持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 restvar $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着色：

例如filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

上传和着色您的SVG-Jsfiddle

灵感来自：https://blog.union.io/code/2017/08/10/img-svg-fill/

小开

只有带有路径信息的SVG.你不能这样做的图像…作为路径，你可以改变行程和填充信息，你就完成了。

所以：通过CSS你可以覆盖路径fill值

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>

小开

简单地更改svg的颜色：

转到svg文件并在样式下，提及填充的颜色。

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

如果您想对内联svg执行此操作，例如，css中的背景图像：

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

of course, replace the ... with your inline image code

小开

2020答案

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

更改任何SVG颜色

  1. 使用<img>标记添加SVG图像。
<img src="dotted-arrow.svg" class="filter-green"/>
  1. 要过滤到特定颜色，请使用以下代码页（点击这里打开代码页）将十六进制颜色代码转换为CSS过滤器：

例如，#00EE00的输出是 

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. 将CSSfilter添加到这个类中。
    .filter-green{filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);}
小开

目标svg中的路径：

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

你可以做内联，比如：

<path fill="#ccc">

或

svg{path{fill: #ccc
小开

在具有背景颜色的box元素上的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>

Note - SVG masks are not supported in Internet Explorer browsers

小开

例如，在超文本标记语言中：

<body><svg viewBox="" width="" height=""><path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path></svg></body>

使用jQuery：

$("#struct1").css("fill","<desired colour>");
小开

最短的Bootstrap兼容方式，无需JavaScript：

.cameraicon {height: 1.6em;/* set your own icon size */mask: url(/camera.svg); /* path to your image */-webkit-mask: url(/camera.svg) no-repeat center;}

并像这样使用它：

<td class="text-center"><div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon --></td>
小开

使用浏览器打开您的图像，右键单击图像单击查看页面源，您将看到图像的svg标签。覆盖并粘贴到您的html中，然后将填充更改为您选择的颜色

小开

只需在图像的svg标签中添加填充：“所需颜色”：示例：

<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>
小开

实际上，这个问题有一个更灵活的解决方案：编写一个Web组件，它将在运行时将SVG修补为文本。也在要点中发布，带有JSFiddle的链接

👍滤镜：反转（42%）棕褐色（93%）饱和（1352%）色调旋转（87度）亮度（119%）对比度（119%）；

<html>
<head><title>SVG with color</title></head>
<body><script>(function () {const createSvg = (color = '#ff9933') => `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22"><defs/><g><ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/><ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/><path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/></g></svg>`.split('#ff9933').join(color);
function SvgWithColor() {const div = Reflect.construct(HTMLElement, [], SvgWithColor);const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';div.innerHTML = createSvg(color);return div;}
SvgWithColor.prototype = Object.create(HTMLElement.prototype);customElements.define('svg-with-color', SvgWithColor);
document.body.innerHTML += `<svg-with-colorcolor='magenta'></svg-with-color>`;
})();
</script></body>
</html>
小开

一个好的方法是使用混音来控制笔画颜色和填充颜色。我的svgs用作图标。

@mixin icon($color, $hoverColor) {svg {fill: $color;
circle, line, path {fill: $color}
&:hover {fill: $hoverColor;
circle, line, path {fill: $hoverColor;}}}}

然后，您可以在scss中执行以下操作：

.container {@include icon(white, blue);}
小开
  1. 方法1

简单而有效的方法

使用任何文本编辑器打开您的. svg文件

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526;fill: rgb(109, 248, 248);" xml:space="preserve"><svg />

给出一个style属性并用颜色填充

  1. 另一种方式

用颜色填充你的形状在这里我有rect形状fill="white"

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"><g><title>background</title><rect fill="#fff" id="canvas_background" height="602" width="802" y="-1"x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%"id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%"width="100%"/></g></g></svg>
小开

您可以尝试使用此css过滤器hack对其进行着色：

.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);}
小开

如果您想动态更改颜色：

  1. 在代码编辑器中打开SVG
  2. 添加或重写每个路径的fill的属性到fill="currentColor"
  3. 现在，该svg将采用您的字体颜色的颜色，因此您可以执行以下操作：
svg {color : "red";}
小开

这里是快速和愤怒的方式：）

 body{background-color: #deff05;} 
svg{width: 30%;height: auto;} 
svg path {color:red;fill: currentcolor;}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453  c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z   M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432  c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111  V351.432z"></path></svg>

小开

如果你想使用css来改变颜色，你也可以使用这样的在线工具：https://change-svg-color.vercel.app/

小开

使用svg<mask>元素。

这比其他解决方案更好，因为：

  • 完全匹配您的原始代码。
  • 在IE工作！
  • 嵌入的图像仍然可以是未修改的外部文件。
  • 图像甚至不必是SVG。
  • Color继承自font-Color，因此易于与文本一起使用。
  • 颜色是一个正常的CSS颜色，而不是一个奇怪的过滤器组合。

<svg style="color: green; width: 96px; height: 96px" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><mask id="fillMask" x="0" y="0" width="100" height="100"><image xlink:href="https://svgur.com/i/AFM.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" /></mask></defs><rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url(&quot;#fillMask&quot;)" /></svg>

https://jsfiddle.net/jamiegl/5jaL0s1t/19/

小开

要更改SVG元素的颜色，我在检查下面的Google搜索框搜索图标时找到了一种方法：

.search_icon {color: red;fill: currentColor;display: inline-block;width: 100px;height: 100px;}
<span class="search_icon"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span>

我使用了带有“显示：inline-block”、高度、宽度的跨度元素，并为子svg元素继承的跨度标签设置了特定的样式“颜色：红色；填充值：当前颜色；”。

小开

如果要对svg的颜色进行编程，则不能直接在svg图像上设置颜色。

在2021年，您可以使用以下css进行颜色更改。

html{--iron-icon-fill-color-1:green;--iron-icon-fill-color-2:red;--iron-icon-stroke-color:white;}

svg#icon-green{fill: var(--iron-icon-fill-color-1, currentcolor);stroke: var(--iron-icon-stroke-color, none);}svg#icon-red{fill: var(--iron-icon-fill-color-2, currentcolor);stroke: var(--iron-icon-stroke-color, none);}svg#icon{fill: var(--iron-icon-fill-color-x, currentcolor);stroke: white;}
<html><body><svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"><circle cx="20" cy="20" r="18" stroke-width="3"/><path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/></svg>

<svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"><circle cx="20" cy="20" r="18" stroke-width="3"/><path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/></svg>
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"><circle cx="20" cy="20" r="18" stroke-width="3"/><path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/></svg>
</body>
</html>

小开

有一些问题@Manish Menaria答案，如果我们转换白色，它显示灰色。

所以添加了一些调整，下面的示例具体显示了如何在材质图标中更改颜色

<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>

.draft-white{filter: brightness(0) invert(1);}
小开

解决方案1-编辑SVG指向当前颜色

<svg>... fill: currentColor stroke: currentColor ...</svg>

然后你可以控制颜色的笔画和填充从您的CSS

svg {color: blue; // or any color of your choice.}

利与弊：

  • 简单，使用传统支持的css。

适用于：

  • 你控制SVG
  • SVG可以内联在超文本标记语言中。

解决方案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;}}

利与弊

  • 相对容易使用
  • 浏览器对mask 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%);}

如果您的原始颜色不是黑色前缀列表（滤镜）brightness(0) saturate(100%)首先将其转换为黑色。

利与弊：

  • 结果和期望的颜色之间可能存在微小的非显着差异。

适用于：

  • 所需的颜色是预先知道的。
  • 外部图像
小开

您可以使用字体图标在SVG上使用任何CSS选项

我正在寻找一种方法来拥有任何CSS选项，如SVG的动画，我最终用我的SVG生成了一个字体图标，然后在跨度内使用它（如FontAwese），所以任何CSS选项，如着色，都可以在上面使用。

我使用https://icomoon.io将我的SVG转换为字体图标。然后您可以在超文本标记语言元素中像FontAwese或MaterialIcon一样使用它。

小开

如果相同的SVG必须以不同的颜色多次使用，请在作为主副本的隐藏SVG中定义路径集。然后放置引用主路径的新实例及其单独的填充。

注意：此方法仅适用于内联<svg>标签。它不适用于<img>标签加载.svg文件。

:root {fill: gray;}
.hidden {display: none;}
svg {width: 1em;height: 1em;}
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="hidden"><path id="s_fave" d="m379 21c-57 0-104 53-123 78-19-25-66-78-123-78-74 0-133 68-133 151 0 45 18 88 49 116 0.5 0.8 1 2 2 2l197 197c2 2 5 3 8 3s5-1 8-3l206-206c2-2 3-3 5-5 0.8-0.8 1-2 2-3 23-28 35-64 35-102 0-83-60-151-133-151z"/><path id="s_star" d="m511 196c-3-10-13-18-23-19l-148-13-58-137c-4-10-14-17-25-17-11 0-21 6-25 17l-58 137-148 13c-11 1-20 8-23 19-3 10-0.3 22 8 29l112 98-33 145c-2 11 2 22 11 28 5 3 10 5 16 5 5 0 10-1 14-4l127-76 127 76c9 6 21 5 30-1 9-6 13-17 11-28l-33-145 112-98c8-7 11-19 8-29z"/></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="red"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="gold"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="purple"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="silver"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="pink"></use></svg><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="blue"></use></svg>

小开

2022 Web Component<load-file>答案

这个（8行）原生Web组件加载外部内容，并将注入内容加载到DOM中

解释和记录在DEV.to博客文章：Web Component

完整源代码：

customElements.define("load-file", class extends HTMLElement {
// declare default connectedCallback as sync so await can be usedasync connectedCallback(// call connectedCallback with parameter to *replace* SVG (of <load-file> persists)src = this.getAttribute("src"),// attach a shadowRoot if none exists (prevents displaying error when moving Nodes)// declare as parameter to save 4 Bytes: 'let 'shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})) {// load SVG file from src="" async, parse to text, add to shadowRoot.innerHTMLshadowRoot.innerHTML = await (await fetch(src)).text()
// append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg>shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))
// if "replaceWith" attribute// then replace <load-svg> with loaded content <load-svg>// childNodes instead of children to include #textNodes alsothis.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)}})
<load-file src="//load-file.github.io/heart.svg"><!-- elements inside load-file are MOVED to shadowDOM --><style shadowRoot>svg {height: 180px; /* stackoverflow subwindow height */}path:nth-child(2n+2) {fill: GREEN; /* shadowDOM style does NOT style global DOM */}</style></load-file>

小开

最简单的技巧是，在页面加载时使用jQuery更改颜色。

      $(document).ready(function () {$('svg').find('path').attr('fill', '#fff');});

#fff是您要设置的颜色代码。

小开

我的用法是引导图标，复制你的svg路径。

span{path{color: red;}}

SVG引导的一个例子：

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"class="bi bi-exclamation-octagon" viewBox="0 0 16 16"><pathd="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" /><pathd="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" /></svg>
小开

如果你有一个具有不同不透明度的单色SVG，你只是想着色到不同的颜色，那么还有另一种方法可以使用：#0 SVG过滤器。然而，这个解决方案不像单行CSS那样直接：

  • 它适用于img元素内的SVG。
  • 这根本不需要编辑源SVG。
  • 它允许您简单地为SVG选择目标颜色，而不必担心复杂的颜色转换，例如hue-rotate。

下面是一个例子：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><filter id="recolourFilter" filterUnits="userSpaceOnUse"><feFlood flood-color="aquamarine" result="flood" /><feComposite in="flood" in2="SourceAlpha" operator="in" /></filter></defs></svg>
<img style="filter: url(#recolourFilter);" width="300" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg" />

在上面的例子中，我们创建了一个内联SVG来定义过滤器，然后我们将其应用于图像。在<filter>块内部，我们首先通过<feFlood>定义我们想要的填充颜色，然后我们使用源的alpha通道加上泛光颜色创建一个合成图像。最后，过滤器通过img元素上的filter CSS属性应用于整个图像。

我从这篇《粉碎》杂志的文章中了解了这种技术。如果您想了解更多关于SVG过滤器的信息，强烈推荐阅读这本书。

需要注意的一些额外事项：

  • 此过滤器可以通过CSSfilter属性应用于任何超文本标记语言元素。
  • 相同的过滤器可以在同一页面上重复使用多次。
  • 如果您使用的是内联SVG，那么<defs>块可以构成svg元素的一部分，并且过滤器仍然可以应用于整个SVG或选择性元素。这避免了过滤器需要单独的SVG元素。
小开

对于角度用户，"inline-svg-2" npm库非常有用：

您现在可以动态配置CSS颜色，包括使用CSS变量，SVG将进行调整。

说明：“当前颜色”技巧仅适用于内联SVG，这就是为什么我们需要一个特殊的模块。

小开

为了更好地解决Manish Menaria（非常感谢您的帮助）响应，请使用此过滤器生成器，而不是倒出的生成器https://angel-rs.github.io/css-color-filter-generator/

.filter-green{filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);}
小开

我的答案是这样的。但我不能100%确定它是否对每个人都有效：

选择svg然后路径，然后您可以更改填充。

.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;}}}}
小开

检查此代码。它的工作原理。

<div><!-- youtube --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white"d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" /></svg>
<!-- instagram --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white"d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" /></svg></div>

css

svg {fill: white;}
小开

我发现有点笨拙，但肯定工作方式动态改变SVG包含#0标签的颜色。

在SVG文件中，您可以通过以下方式添加css：

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

在那里，您可以使用@媒体规则，SVG可以使用这些规则在自身之外寻找上下文环境。有一个宽高比媒体功能适用于SVG框（例如<img>标签）。您可以通过稍微拉伸SVG框来为SVG创建不同的上下文。

通过这种方式，您还可以使收藏夹图标与网站上显示的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">

提交答案