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

计算机软件开发 2024-10-3 19:51:20 43 0 来自 中国
题目缘故原由:该部分svg图标带有fill属性,不能直接通过css 修改fill属性。
办理思绪:一、移除默认颜色(去色操纵);二、使用CSS3滤镜filter中的属性drop-shadow。
思绪一:移除默认颜色(去色操纵)


  • 用编辑器打开.svg文件,搜索fill="#xxx" ,删除后即可通过css举行修改。
  • 大概将如下代码删除即可。
  <defs>    <style>      .cls-1 {        fill: #xxx;      }    </style>  </defs>

  • 在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是一个将图像转换为灰度图像的函数
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 16:51, Processed in 0.087806 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表