CodeSky 代码之空

这周在切图的时候拿到了 svg，之前自己一直是用 font-icon 的，感觉挺方便的，svg 相比 font-icon 有一些优点（这个以前在网上看到过），本文暂时不展开讲述了。

但是一些图标，在 Element 里自带的 el-icon-xxx 的方式非常统一，其实是根据 class 设置的，我也不喜欢 svg 的插入方式（太硬），所以希望尽可能的让项目中的 font 保持统一。

然后就发现了 svg 没法像 font icon 一样设置 color。

在 svg 标签的情况下，倒是有很多方法，就比如：

1svg { fill: #369; }
2

详细的可以看：SVG图标颜色文字般继承与填充

但是通过 background 方式定义就有了一些限制，让人觉得蛋疼，后来找到了用 mask 的方法来取代 background 设置，这样可以方便的设置颜色：

1.icon {
2    background-color: red;
3    -webkit-mask-image: url(icon.svg);
4    mask-image: url(icon.svg);
5}
6

mask 可以像 background 一样设置类似的属性，所以我们可以很方便的做到 font 的效果，区别是兼容性——Emmmm，当然我们的系统不需要考虑兼容性，关于兼容性，查一下 caniuse 或者 MDN 就知道了。

后来我想到，是不是能用 filter 搞一波，filter 也有许多很魔幻的东西——果然：

1.icon { 
2  width: 48px;
3  height: 48px;
4  display: inline-block;
5  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
6  background-size: cover;
7}
8
9.icon-red {}
10
11.icon-orange { 
12  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
13  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
14}
15

当然相比 mask 就显得不太直接。

后来我发现，原来这方法并不是我原创的！早就有人写了！Well！

剩下的方法比如 Data URI 或者 SVG 的雪碧图，这种定制型不是很强，但是兼容性可以的方案也是备选项，在原文中也有提到。

所以说原文是什么：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images