Open BestDI opened 4 years ago
但是一些图标，在 Element 里自带的 el-icon-xxx 的方式非常统一，其实是根据 class 设置的，我也不喜欢 svg 的插入方式（太硬），所以希望尽可能的让项目中的 font 保持统一。
然后就发现了 svg 没法像 font icon 一样设置 color。
在 svg 标签的情况下，倒是有很多方法，就比如：
css svg { fill: #369; } 详细的可以看：SVG图标颜色文字般继承与填充
css svg { fill: #369; }
但是通过 background 方式定义就有了一些限制，让人觉得蛋疼，后来找到了用 mask 的方法来取代 background 设置，这样可以方便的设置颜色：
.icon { background-color: red; -webkit-mask-image: url(icon.svg); mask-image: url(icon.svg); }
mask 可以像 background 一样设置类似的属性，所以我们可以很方便的做到 font 的效果，区别是兼容性——Emmmm，当然我们的系统不需要考虑兼容性，关于兼容性，查一下 caniuse 或者 MDN 就知道了。
后来我想到，是不是能用 filter 搞一波，filter 也有许多很魔幻的东西——果然：
.icon { width: 48px; height: 48px; display: inline-block; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; background-size: cover; } .icon-red {} .icon-orange { -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); }
当然相比 mask 就显得不太直接。
后来我发现，原来这方法并不是我原创的！早就有人写了！Well！
剩下的方法比如 Data URI 或者 SVG 的雪碧图，这种定制型不是很强，但是兼容性可以的方案也是备选项，在原文中也有提到。
所以说原文是什么：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
但是一些图标，在 Element 里自带的 el-icon-xxx 的方式非常统一，其实是根据 class 设置的，我也不喜欢 svg 的插入方式（太硬），所以希望尽可能的让项目中的 font 保持统一。
然后就发现了 svg 没法像 font icon 一样设置 color。
在 svg 标签的情况下，倒是有很多方法，就比如：
css svg { fill: #369; }详细的可以看：SVG图标颜色文字般继承与填充但是通过 background 方式定义就有了一些限制，让人觉得蛋疼，后来找到了用 mask 的方法来取代 background 设置，这样可以方便的设置颜色：
mask 可以像 background 一样设置类似的属性，所以我们可以很方便的做到 font 的效果，区别是兼容性——Emmmm，当然我们的系统不需要考虑兼容性，关于兼容性，查一下 caniuse 或者 MDN 就知道了。
后来我想到，是不是能用 filter 搞一波，filter 也有许多很魔幻的东西——果然：
当然相比 mask 就显得不太直接。
后来我发现，原来这方法并不是我原创的！早就有人写了！Well！
剩下的方法比如 Data URI 或者 SVG 的雪碧图，这种定制型不是很强，但是兼容性可以的方案也是备选项，在原文中也有提到。
所以说原文是什么：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images