动态修改svg图片颜色

使用场景

引入颜色为纯色的svg图片时，动态修改svg图片填充颜色。引入的方式包括直接svg代码引用和img标签间接引用。

直接引用SVG

如果通过svg代码的方式引入图片，那么可以直接修改fill属性动态修改颜色。代码如下

	  <style>
        svg:hover{
            fill: #fa0;
        }
    </style>
    <div class="container">
        <svg t="1661261007730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1771" width="200" height="200"><path d="M512.64 645.12a153.6 153.6 0 0 1-153.6-153.6 39.04 39.04 0 0 1 77.44 0 76.16 76.16 0 1 0 152.32 0 39.04 39.04 0 0 1 77.44 0 153.6 153.6 0 0 1-153.6 153.6z" fill="#445365" p-id="1772"></path><path d="M928 354.56A112.64 112.64 0 0 0 810.24 256h-67.84V192a128 128 0 0 0-124.8-128H405.76a128 128 0 0 0-124.8 128v64h-64a112.64 112.64 0 0 0-120.96 98.56l-23.68 496a97.92 97.92 0 0 0 28.16 72.32A122.88 122.88 0 0 0 192.64 960h640a123.52 123.52 0 0 0 90.24-37.12 97.92 97.92 0 0 0 28.16-72.32zM357.76 192a48.64 48.64 0 0 1 48-48h211.84a48.64 48.64 0 0 1 48 48v64H357.76zM213.76 330.88h596.48c23.68 0 40.32 14.08 40.96 26.88l4.48 95.36H168.32l4.48-95.36c0.64-12.8 19.84-26.88 40.96-26.88z m654.08 538.88a46.72 46.72 0 0 1-33.92 13.44H192.64a46.72 46.72 0 0 1-33.92-13.44 20.48 20.48 0 0 1-7.04-15.36l15.36-323.84h692.48l15.36 323.84a18.56 18.56 0 0 1-7.04 15.36z" fill="#445365" p-id="1773"></path></svg>
    </div>

需要注意的是该SVG代码中不能含有fill属性值，如果有的话则需要手动删除。

也有的SVG图片通过clss类来设置填充颜色，此时只要设置的style样式层级比该类更高就可以修改成功。比如：

通过img标签引用SVG

若通过img标签引入SVG，则无法直接改变SVG填充色。此时可以使用一个很妙的主意：利用滤镜filter并设置drop-shadow再造一个图片，并把原来的图片遮挡住不显示。
filter是css3的一个属性，用于定义元素（通常是 ）的视觉效果。比如定义图像模糊度(blur)、亮度（brightness）、对比度（contrast）等。而drop-shadow用于生成投影效果。
drop-shadow语法如下图所示：

filter: drop-shadow(x偏移 y偏移 模糊大小 色值)

drop-shadow产生的效果实际上可以看作投影[1]。由于SVG图里的图纹是透明的，因此可以再生成一个相同形状的图片效果。比如

filter: drop-shadow(blue 200px 0);

产生的效果如图所示

生成想要的阴影图后，只需要再把原图隐藏掉就可以了。可以通过transform的translate属性偏移原图，并将父元素设置overflow为hidden。
代码示例如下：

   <style>
        .container{
            width: 800px;
            height:300px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: aliceblue;
        }
        .container:hover{
            background-color:lightblue;
            overflow: hidden;
        }
        .svg-img{
            width: 200px;
            height: 200px;
        }
        .svg-img:hover{
            transform: translateX(-500px);
            filter: drop-shadow(blue 500px 0);
        }
    </style>
    <div class="container" >
      <img class="svg-img" src="../assets/岗位管理.svg" alt="">
    </div>

效果如右图所示：

参考链接

[1].详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用