通过css改变svg的颜色（CSS3滤镜filter的属性drop-shadow）

参考链接：http://willless.com/how-to-change-the-color-of-svg-introduced-by-img.html

• 1.svg标签直接在页面中

svg {
    fill: currentColor;  //currentColor为css变量，自动读取当前元素颜色
}

• 2.通过img引入的svg文件

此时css对svg文件无法生效，此时要用到CSS3滤镜filter中的drop-shadow，通过生产一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线

<img src="img/success.svg">
img{
    position: relative;
    left: -80px;
    filter: drop-shadow(#fff 80px 0);
}

备注：drop-shadow可用于png图片变色

drop-shadow相关

CSS filter

drop-shadow(h-shadow v-shadow blur spread color)

• 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：