通过img引入的svg如何修改颜色？

1. SVG标签直接在页面中引用

/* 在css中可以直接修改svg的填充颜色*/
svg{
	fill: color;
}

2. svg图片通过img标签引入

由于svg图片的内容比较多，所以我们一般都选择通过img标签引入，但是，当我们引入之后，会发现修改不了svg图片的颜色了，此时的css对svg失效。

解决办法： 网上常见的解决办法是使用CSS3中的滤镜filter中的drop-shadow，来产生一个阴影，然后结合transform中的translate来移动到svg的位置，然后给它的父盒子添加overflow:hidden来实现效果。

<img src="./imgs/logo-black.svg" alt="" />
img parentBox{
	overflow:hidden;
}
img{
	/* color是颜色，move移动的距离*/
	transform:translateX(-move)
	filter:drop-shadow(color,move,0)
}

注意：这种方法不适用于原来图片上有监听事件的情况，例如，img图片上有hover事件，原来盒子溢出被隐藏，导致事件不能触发。

解决方法： 我遇到这个问题的时候，目前选择使用js事件来修改img图片的src来修改颜色