1.svg标签直接在页面中

  1. svg {
  2. fill: currentColor; //currentColor为css变量,自动读取当前元素颜色
  3. }

2.通过img引入的svg文件

此时css对svg文件无法生效,此时要用到CSS3滤镜filter中的drop-shadow,通过生产一个可指定颜色的阴影放置于svg的位置,并将原始svg移出视线

  1. <img src="img/success.svg">
  1. img{
  2. position: relative;
  3. left: -80px;
  4. filter: drop-shadow(#fff 80px 0);
  5. }

备注:drop-shadow可用于png图片变色

作者 铁血 汉子 2020年2月21日
2025/05/08/11:30:50pm 2020/2/21/8:49:02
0 32712