我想使用这种技术并更改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 >
当前回答
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>
其他回答
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%); }
你可以试着用这个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);
}
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。
如果您有一个具有不同不透明度的单色SVG，您只是想将其着色为不同的颜色，那么可以使用另一种方法:feFlood SVG过滤器。
然而，这个解决方案不像单行CSS那样简单:
它适用于img元素中的svg。 这根本不需要编辑源SVG。 它允许您简单地为SVG选择目标颜色，而不用担心复杂的颜色转换，如色调旋转。
这里有一个例子:
<svg xmins =“http://www.w3.org/2000/svg”width= 0“height= 0”> < defs > <滤镜id=“滤镜”=“用户空间”> <feFlood flood-color="aquamarine" result="flood" /> <feComposite in="洪水" in2="SourceAlpha"运营商="in" /> <过滤器- > < / defs > < / svg > <img style=“过滤器::url: recolourFilter);“width=" src " src=“https://upload.wikimedia.org/wikipedia/commons/commons/vs_vs_svg.svg”
在上面的示例中，我们创建了一个内联SVG来定义过滤器，然后将其应用于图像。在<filter>块中，我们首先通过<feFlood>定义我们想要的填充颜色，然后我们使用源的alpha通道和泛洪颜色创建一个合成图像。最后，通过img元素上的filter CSS属性对整个图像应用过滤器。
我是从Smashing杂志的一篇文章中学到这个技巧的。如果您想了解更多关于SVG筛选器的知识，强烈推荐阅读这本书。
还有一些需要注意的事情:
这个过滤器可以通过CSS filter属性应用于任何HTML元素。 同一过滤器可以在同一页面上重复使用多次。 如果您使用的是内联SVG，则<defs>块可以构成SVG元素的一部分，而过滤器仍然可以应用于整个SVG或选择性元素。这避免了过滤器需要单独的SVG元素。
如果你想使用CSS来改变颜色，你也可以使用这样的在线工具:使用CSS过滤器改变SVG颜色
