svg改变颜色 css实现

img src=xxx.svg的情况

doctype html>


    
    
    
    通过css改变单色svg颜色
    
        .main{
            padding: 50px 100px;
            display: flex;
        }
        .box{
            position: relative;
            width: 40px;
            height: 40px;
            overflow: hidden;
            margin: 0 20px;
        }
        .box > img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: -40px;
            top: 0;
            filter: drop-shadow(#C9C9C9 40px 0);
        }
        .box:hover img{
            filter: drop-shadow(#4364E8 40px 0);
        }
    


svg -> svg img

    
        
    
    
        
    
    
        
    

实现原理：利用filter的drop-shadow进行描边填充，生成一个有形状的阴影，并设置自己需要的颜色

svg dom的情况

doctype html>


    
    
    
    通过css改变单色svg颜色
    
        .main{
            padding: 50px 100px;
            display: flex;
        }
        .svg{
            width: 40px;
            height: 40px;
            margin: 0 20px;
            fill: #C9C9C9;
        }
        .svg:hover{
            fill: #4364E8;
        }

    



svg->svg dom

    
        
    
    
        
    
    
        
    

实现原理，svg可以直接通过fill样式进行填充指定颜色

注意

在使用antd的Carousel走马灯效果时候，出现一闪一闪重绘filter的情况

分析：将overflow: hidden;去掉发现就不会闪烁，可能是因为实体img被判定为隐藏，走马灯效果导致每次css重绘了filter（猜测）

解决：将外层overflow: hidden;去掉，使用before伪类生成等大块块将实体覆盖即可

doctype html>


    
    
    
    通过css改变单色svg颜色
    
        .main{
            padding: 50px 100px;
            display: flex;
        }
        .box2{
            position: relative;
            width: 40px;
            height: 40px;
            /*overflow: hidden;*/
            margin: 0 20px;
        }
        .box2:before{
            position: absolute;
            left: -40px;
            top: 0;
            z-index: 2;
            content: '';
            width: 40px;
            height: 40px;
            background: #FFFFFF;
        }
        .box2 > img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: -40px;
            top: 0;
            filter: drop-shadow(#C9C9C9 40px 0);
        }
        .box2:hover img{
            filter: drop-shadow(#4364E8 40px 0);
        }
    



svg -> svg img 2

    
        
    
    
        
    
    
        
    

demo: https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/drop-shadow/index.html

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()