svg图标无法修改颜色的办理方案

计算机软件开发 · 2024-10-3 19:51:20

题目缘故原由：该部分svg图标带有fill属性，不能直接通过css 修改fill属性。
办理思绪：一、移除默认颜色(去色操纵)；二、使用CSS3滤镜filter中的属性drop-shadow。
思绪一：移除默认颜色(去色操纵)

用编辑器打开.svg文件，搜索fill="#xxx" ，删除后即可通过css举行修改。
大概将如下代码删除即可。

在iconfont.cn上，选中项目中的文件，应用批量操纵 -> 批量去色。

思绪二：通过CSS3滤镜filter中的属性drop-shadow改变svg的颜色。

// 通过img引入的svg文件。// 此时css对svg文件无法见效，要用到CSS3滤镜filter中的drop-shadow，通过生产一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线<img src="img/success.svg">img{ position: relative; left: -80px; filter: drop-shadow(#fff 80px 0); // 投影颜色}svg { fill: currentColor; //currentColor为css变量，主动读取当前元素颜色}drop-shadow相干：

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

filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但体现效果有差异。drop-shadow没有内阴影效果；drop-shadow不能阴影叠加。
drop-shadow滤镜可通过给元素或图片非透明地域添加投影改变png小图片颜色。
原理如下：
对于配景透明的 png 小图片而言，假如我们施加一个不带含糊的投影，等同于天生了别的一个颜色的小图片。
我们把原始图片埋伏在容器外貌，投影图片在容器中心，给人的感觉就是换了颜色的图片。
然后，来一个向左偏移，再来一个 overflow:hidden 原图就埋伏掉了，只剩下一个投影图片。
Q&A
1、在 Chrome 欣赏器下，drop-shadow 有一个如下的出现特性：

在 Chrome 欣赏器下，假如一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的。
实体部分哪怕有 1 像素可见，则 drop-shadow 完全可见。

以是：

text-indent 负值埋伏原始图，无投影，失败
clip 剪裁埋伏，无投影，失败
margin 负值埋伏原始图，无投影，失败
left 负值埋伏原始图，无投影，失败

通通不可，实现遇到了巨大的拦阻。
厥后想，假如我实体部分也在可视地域内，但是是透明的，会怎样呢（反正不会有投影出来）
于是，就实验了常常带来不测惊喜的透明边框，效果是可喜的
因此，下面这一个 css 声明式万万不能少的：
border-right: 20px solid transparent;关于兼容性
IE13+ 支持，Chrome 和 FireFox 欣赏器支持，移动端 ios 支持，Android 4.4+ 支持。也就是，根本上，移动端如今可以使用这种技能了。
另：
filter: grayscale(100%); //grayscale是一个将图像转换为灰度图像的函数

svg图标无法修改颜色的办理方案

所属分类: 问答交流

新帖推荐: 30日

推荐作品