定位'svg'标签内的路径:

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

你可以内联，比如:

<path fill="#ccc">

Or

svg{
   path{
        fill: #ccc

Method 1 The easy and effect way: Open your .svg file with any text editor <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 /> Give an style attribute and fill that with color. Another way Fill with color in your shape. Here i have rect shape 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>

最简单的方法是使用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/

为了更好地解决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路径。

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">
          <path
            d="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" />
          <path
            d="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>