CSS 像 font 一样使用 svg 与上色

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

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

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

svg 标签的情况下,倒是有很多方法,就比如:

svg { fill: #369; }

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

但是通过 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

标签: 知识, 代码段

添加新评论