美文网首页
通过img引入的svg如何改颜色?

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

作者: 仰望天空的人 | 来源:发表于2024-06-12 15:55 被阅读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图片变色

    相关文章

      网友评论

          本文标题:通过img引入的svg如何改颜色?

          本文链接:https://www.haomeiwen.com/subject/xpmgudtx.html