我想使用这种技术并更改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颜色,但到目前为止我还不能这样做。我在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”,然后选择“path”。然后你可以改变'fill'。
.eye-icon-container {
width: 33px;
height: 33px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
:hover {
background-color: #ddf0ff;
}
:active {
background-color: #1d398d;
svg {
path {
fill: #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元素。
简单地改变SVG文件的颜色:
转到SVG文件,在styles下面,在fill中提到颜色:
<style>.cls-1{fill: #FFFFFF;}</style>
定位'svg'标签内的路径:
<svg>
<path>....
</svg>
你可以内联,比如:
<path fill="#ccc">
Or
svg{
path{
fill: #ccc
你可以试着用这个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元素的颜色,我发现了一种方法,同时检查下面的谷歌搜索框搜索图标:
.search_icon { 颜色:红色; 填充:currentColor; 显示:inline-block; 宽度:100 px; 身高:100 px; } < span class = " search_icon”> <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-. 27a6.471 6.471 000 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-。59岁4.23 - -1.57 l.27.28v。79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5 s7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg> . < / span >
我使用了一个span元素“display:inline-block”,高度,宽度和设置一个特定的样式“颜色:红色;到svg子元素继承的span标签。