动态改变SVG的颜色

最近写页面，根据设计标签 hover的时候需要改变图片颜色状态，切下的图又是svg格式，使用外部引入的方式；
网上搜索发现
1、可以在svg文件中更改fill属性更改图片，将fill属性改成currentColor， 然后通过继承父元素color属性可以改变颜色

<rect id="矩形" fill="#1C242C" opacity="0" x="0" y="0" width="18" height="18"></rect>
<rect id="矩形" fill="currentColor" opacity="0" x="0" y="0" width="18" height="18"></rect>

2、查看path标签内fill属性的值，要实现鼠标移入更改svg颜色，即修改fill属性值

svg:hover path{
	fill:red;
}

但是我用的是img标签引入的，好像是找不到svg的，也不太行
3、通过网上查看可以使用 css filter: drop-shadow(#fff 80px 0);通过产生一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线；
当给img添加 filter 属性后：会出现两个相距80px的图片，第二个为阴影，动态更改的就是这个阴影的颜色

那么我们就把实际的img移除视野就好了， 我的做法是给外层div一个overflow：hidden；然后通过定位或margin-left的方法把实际图片移除，让阴影在我们所需的位置上就好了