我想使用这种技术并更改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 >
当前回答
你可以试着用这个css滤镜来给它上色:
.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);
}
其他回答
只有带有路径信息的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>
要更改任何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.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
/* Some more code goes on */
</g>
</svg>
您可以观察到有一些XML标记，如路径、圆、多边形等。在style属性的帮助下，您可以添加自己的颜色。请看下面的例子
<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.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
将style属性添加到所有标记中，这样就可以获得所需颜色的SVG。
根据Daniel的评论，我们可以直接使用填充属性，而不是样式属性中的填充元素。
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必须使用不同的颜色多次使用，可以在隐藏的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>
