使用场景

引入颜色为纯色的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>