SVG图片修改颜色的方法--mask遮罩、filter滤镜和filter阴影三种方法对比
以图片方式插入HTML的SVG是不能通过CSS设置颜色的，相当于已经渲染的图片。改变颜色的方法思路和PNG图片一样，下面对比三种实现方法。
方法
一、mask遮罩
最简单的就是css的mask遮罩了，只要把背景颜色设为目标色，然后用图片遮罩，图片不透明的部分会被抠出露出背景，达到效果。
.example{
background-color:gold;
mask: url("./xxx.svg");
}
解释：
- 把一个div背景设为金色
- 使用目标图片遮罩
优点
简单方便。
缺点
属于实验特性，兼容性非常差。只有chrome支持，而且需要加webkit前缀。官方文档
二、filter滤镜：通过色调、饱和度等组合近似渲染颜色
原理是通过色彩坐标系的转换，将rgb转换为亮度，色度等值，再通过滤镜渲染。
.example{
filter: invert(52%) sepia(82%) saturate(2494%) hue-rotate(327deg) brightness(104%) contrast(92%);
}
优点
色彩接近，能用。
缺点
首先需要转换工具，其次不具可读性。最重要的是颜色转换并非线性，还有白点色温，gamma等参数影响精度，任何颜色转换矩阵都会产生误差值，这在无必要的误差严格编程领域是不被允许引入的。
三、filter阴影
解决思路是使用投射阴影，再隐藏原图。难点在于隐藏原图，因为在chrome里有个优化机制，一般会对超出窗口的原图部分忽略其阴影的渲染。解决方法是利用滚动条来隐藏。
.icon {
width: 60px;
overflow: hidden;
img {
width: 60px;
height: 60px;
padding: 0px;
margin: 0px;
border-right: 60px solid transparent;
filter: drop-shadow(60px 0px 0px gold);
position: relative;
left: 60px;
}
}
解释：
- 外围容器一倍宽的窗口，隐藏滚动条。
- 图像右边框设为透明一倍宽，整体共两倍宽长度，触发滚动条，给阴影的显示占位
- 向右一倍宽投射阴影
- 相对左移一倍宽，隐藏原图显示
优点
准确符合预期实现效果。推荐使用。
缺点
设计巧妙但可能有点冗长。
总结
SVG图片修改颜色是很常见的需求，然而如果以图像形式引入，则不能像字体或边框之类能直接css更改前景色，而需要像对待PNG图片一样处理。
本文讨论了三种图片修改颜色的方法，并推荐最佳方法是通过阴影投射来解决。该方法的设计实现有一定的巧妙之处，在一定程度上考验知识的综合运用能力。
