svg图标无法修改颜色的解决方案

html-css017

svg图标无法修改颜色的解决方案,第1张

问题原因:该部分svg图标带有fill属性,不能直接通过css 修改fill属性。

解决思路:一、移除默认颜色(去色操作);二、利用CSS3滤镜filter中的属性drop-shadow。

要使用标准的 css3 实现某元素的投影效果,有两个方法,第一个就是使用常见的 box-shadow ,第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。

所以:

通通不行,实现遇到了巨大的阻碍。

后来想,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)

于是,就尝试了经常带来意外惊喜的透明边框,结果是可喜的

因此,下面这一个 css 声明式千万不能少的:

关于兼容性

IE13+ 支持,Chrome 和 FireFox 浏览器支持,移动端 ios 支持,Android 4.4+ 支持。也就是,基本上,移动端现在可以使用这种技术了。

另:

在项目中经常会用到svg图标,伴随着 hover 效果这样的需求,百度上一大堆人都在说修改 fill 属性就能实现,但结果都是毫无效果。来看看我是怎么修改的。本教程含如何在vue中引入svg和修改svg颜色,如果想直接看如何修改svg颜色请看最下边。

然后在mian.js 注册

svg 颜色绘制通常都是用 fill 来实现。

看上边的 fill 属性是个 none ,这样修改是方便咱们前端后期通过 color 来修改。注意哦,这个只适用于单色svg图标。后边的 fill 属性 要修改为 fill=currentColor 。一定是都要才会有效果哦!

svg颜色才会随着css color 一起修改哦

直接修改text 的fill的值,其实和字体的样式color值一样,比如用jquery :$("text").css({fill:"#D15FEE"})或者$("text").css("fill","#D15FEE")