通过img引入的svg如何改颜色?

2024-06-12  本文已影响0人  仰望天空的人

1.svg标签直接在页面中
需要把html内svg的fill删掉

svg {
  fill: red;
}

2.通过img引入的svg文件

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

 <img src="img/success.svg">
img{
    position: relative;
    transform: translateX(-80px);
    filter: drop-shadow(#f00 80px 0);     
    border-left: 4px solid transparent;      
    border-right: 4px solid transparent;
}

drop-shadow可用于jpg 、png图片变色

上一篇下一篇

猜你喜欢

热点阅读