我想使用这种技术并更改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 >
当前回答
只有带有路径信息的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>
其他回答
最简单的方法是使用https://icomoon.io/app/#/select之类的服务从SVG创建字体。上传你的SVG，点击“生成字体”，包括字体文件和CSS内容到你的侧，只是使用和样式它像任何其他文本。我总是这样使用它，因为它使造型更容易。
但正如@CodeMouse92评论的文章中提到的，图标字体会破坏屏幕阅读器(而且可能不利于SEO)。所以还是坚持使用svg吧。
使用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/
例如，在你的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>");
2020的答案
CSS过滤器适用于所有当前的浏览器
改变任何SVGs的颜色
Add the SVG image using an <img> tag. <img src="dotted-arrow.svg" class="filter-green"/> To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter: For example, output for #00EE00 is filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); Add the CSS filter into this class. .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }
最短的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>
