CSS 像 font 一样使用 svg 与上色
这周在切图的时候拿到了 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
评论 (0)