我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我在CSS中使用这个，但我的图像总是黑色的，无论如何。
我的代码:
.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >
当前回答
Manish Menaria的回答有一些问题，如果我们转换白色，它会显示灰色。
所以我添加了一些调整，下面的例子特别展示了如何改变材质图标的颜色:
<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>
.draft-white{
filter: brightness(0) invert(1);
}
其他回答
如果你想对一个内联SVG文件这样做，也就是说，例如，CSS内容中的背景图像:
背景:url(“数据:photo /svg+xml;charset=utf8，%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);
当然，替换…使用您的内联图像代码。
只需在图像的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>
定位'svg'标签内的路径:
<svg>
<path>....
</svg>
你可以内联，比如:
<path fill="#ccc">
Or
svg{
path{
fill: #ccc
例如，在你的HTML中:
<body>
<svg viewBox="" width="" height="">
<path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
</body>
使用jQuery:
$("#struct1").css("fill", "<desired colour>");
如果你想动态改变颜色:
在代码编辑器中打开SVG 添加或重写每个路径的填充属性为fill="currentColor" 现在，svg将采用你的字体颜色，所以你可以做一些像这样的事情: svg { 颜色:“红色”; ｝
