svg改变颜色 css实现

【03】

已于 2022-06-24 13:51:24 修改

阅读量3.6k

点赞数 2

分类专栏： css 文章标签： css

于 2021-07-29 17:19:02 首次发布

本文链接：https://blog.csdn.net/weixin_43840202/article/details/119216221

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

img src=xxx.svg的情况

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过css改变单色svg颜色</title>
    <style>
        .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);
        }
    </style>
</head>
<body>
<p>svg -> svg img</p>
<div class="main">
    <div class="box">
        <img src="./img/telegram.svg" alt="">
    </div>
    <div class="box">
        <img src="./img/twitter.svg" alt="">
    </div>
    <div class="box">
        <img src="./img/medium.svg" alt="">
    </div>
</div>
</body>
</html>

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

svg dom的情况

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过css改变单色svg颜色</title>
    <style>
        .main{
            padding: 50px 100px;
            display: flex;
        }
        .svg{
            width: 40px;
            height: 40px;
            margin: 0 20px;
            fill: #C9C9C9;
        }
        .svg:hover{
            fill: #4364E8;
        }

    </style>
</head>
<body>

<p>svg->svg dom</p>
<div class="main">
    <svg id="icon-Telegram" viewBox="0 0 1024 1024" class="svg">
        <path d="M1021.17504 146.432l-154.538667 728.704c-11.648 51.413333-42.069333 64.213333-85.248 39.978667l-235.434666-173.482667-113.621334 109.226667c-12.544 12.629333-23.04 23.125333-47.274666 23.125333l16.896-239.786667 436.352-394.24c18.944-16.938667-4.138667-26.325333-29.482667-9.386666L269.388373 570.197333 37.153707 497.536c-50.517333-15.786667-51.413333-50.517333 10.496-74.752l908.373333-349.952c42.026667-15.786667 78.848 9.386667 65.109333 73.6z"></path>
    </svg>
    <svg id="icon-Twitter" viewBox="0 0 1024 1024" class="svg">
        <path d="M989.866667 196.992c-35.669333 16.256-73.642667 26.922667-112.597334 31.616A200.618667 200.618667 0 0 0 963.498667 117.461333c-38.4 23.338667-80.554667 39.808-124.586667 48.682667A193.365333 193.365333 0 0 0 695.808 102.698667c-108.245333 0-196.010667 90.026667-196.010667 201.088 0 15.786667 1.706667 31.061333 5.034667 45.781333-162.986667-8.405333-307.413333-88.405333-404.181333-210.133333a204.672 204.672 0 0 0-26.538667 101.12c0 69.76 34.645333 131.328 87.210667 167.381333A192.512 192.512 0 0 1 72.533333 382.848v2.474667c0 97.450667 67.584 178.730667 157.269334 197.12-16.768 4.778667-34.133333 7.168-51.626667 7.082666-12.586667 0-24.917333-1.194667-36.864-3.584 24.917333 79.914667 97.28 138.026667 183.125333 139.605334A387.157333 387.157333 0 0 1 34.133333 808.874667a545.962667 545.962667 0 0 0 300.586667 90.282666c360.704 0 557.909333-306.346667 557.909333-572.032 0-8.789333-0.213333-17.493333-0.512-26.026666a402.176 402.176 0 0 0 97.749334-104.106667"></path>
    </svg>
    <svg id="icon-Discord" viewBox="0 0 1024 1024" class="svg">
        <path d="M339.925333 483.541333c50.688 0 91.733333 38.016 90.88 84.48 0 46.506667-40.106667 84.48-90.88 84.48-49.834667 0-90.88-37.973333-90.88-84.48 0-46.464 40.106667-84.48 90.88-84.48z m325.12 0c50.773333 0 90.88 38.016 90.88 84.48 0 46.506667-40.106667 84.48-90.88 84.48-49.834667 0-90.837333-37.973333-90.837333-84.48 0-46.464 40.106667-84.48 90.88-84.48z m84.224 398.208c192.042667-6.186667 265.984-134.826667 265.984-134.826666 0-285.696-125.226667-517.248-125.226666-517.248-125.013333-95.744-244.138667-93.141333-244.138667-93.141334l-12.16 14.208c147.754667 46.122667 216.32 112.725333 216.32 112.725334a698.112 698.112 0 0 0-261.546667-85.162667 720.426667 720.426667 0 0 0-175.488 1.706667c-5.248 0-9.6 0.853333-14.762666 1.706666-30.421333 2.730667-104.362667 14.208-197.290667 55.978667-32.128 15.018667-51.285333 25.770667-51.285333 25.770667S221.824 193.28 378.197333 147.2l-8.704-10.666667s-119.04-2.602667-244.138666 93.184c0 0-125.141333 231.509333-125.141334 517.162667 0 0 72.96 128.597333 265.045334 134.826667 0 0 32.085333-39.850667 58.282666-73.557334-110.421333-33.792-152.064-104.789333-152.064-104.789333s8.618667 6.272 24.234667 15.146667c0.853333 0.853333 1.706667 1.792 3.456 2.602666 2.645333 1.877333 5.248 2.730667 7.893333 4.48 21.674667 12.416 43.392 22.186667 63.36 30.165334 35.626667 14.208 78.208 28.416 127.829334 38.186666a596.48 596.48 0 0 0 225.066666 0.853334 563.2 563.2 0 0 0 125.952-38.101334 498.944 498.944 0 0 0 99.968-52.394666s-43.434667 72.746667-157.312 105.642666a3683.413333 3683.413333 0 0 0 57.429334 71.808h-0.085334z"></path>
    </svg>
</div>

</body>
</html>

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

注意

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

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过css改变单色svg颜色</title>
    <style>
        .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);
        }
    </style>
</head>
<body>

<p>svg -> svg img 2</p>
<div class="main">
    <div class="box2">
        <img src="./img/telegram.svg" alt="">
    </div>
    <div class="box2">
        <img src="./img/twitter.svg" alt="">
    </div>
    <div class="box2">
        <img src="./img/medium.svg" alt="">
    </div>
</div>
</body>
</html>