我想使用这种技术并更改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的回答(非常感谢您的帮助)，请使用此过滤器生成器而不是专用生成器: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%);
}
其他回答
你不应该直接在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>
最简单的方法是使用https://icomoon.io/app/#/select之类的服务从SVG创建字体。上传你的SVG，点击“生成字体”，包括字体文件和CSS内容到你的侧，只是使用和样式它像任何其他文本。我总是这样使用它，因为它使造型更容易。
但正如@CodeMouse92评论的文章中提到的，图标字体会破坏屏幕阅读器(而且可能不利于SEO)。所以还是坚持使用svg吧。
例如，在你的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 <mask>元素。
这比其他解决方案更好，因为:
与原始代码紧密匹配。 工作在IE! 嵌入的映像仍然可以是一个外部的、未修改的文件。 图像甚至不必是SVG。 颜色继承自字体颜色，所以很容易与文本一起使用。 颜色是一个正常的CSS颜色，而不是一个奇怪的过滤器组合。
<svg style="color: green;宽度:96 px;viewBox="0 0 100 100" preserveAspectRatio="none"> < def > <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=" ppngback .png" /> < / >面具 < / def > <rect x="0" y="0" width="100" height="100" style="stroke: none;fill: currentColor" mask="url("#fillMask")"/> < / svg >
https://jsfiddle.net/jamiegl/5jaL0s1t/19/
对于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，这就是为什么我们需要一个特殊的模块。
