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

Posted 2023-03-14

参考技术A 问题原因：该部分svg图标带有fill属性，不能直接通过css 修改fill属性。
解决思路：一、移除默认颜色(去色操作)；二、利用CSS3滤镜filter中的属性drop-shadow。

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

所以：

通通不行，实现遇到了巨大的阻碍。
后来想，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）
于是，就尝试了经常带来意外惊喜的透明边框，结果是可喜的
因此，下面这一个 css 声明式千万不能少的：

关于兼容性
IE13+ 支持，Chrome 和 FireFox 浏览器支持，移动端 ios 支持，android 4.4+ 支持。也就是，基本上，移动端现在可以使用这种技术了。

另：