正文

详解如何愉快的在微信小程序中使用SVG图标

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0720

这篇文章主要介绍了详解如何愉快的在微信小程序中使用SVG图标,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

SVG近几年因各种优势被大量的应用，遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。
那么，真的就没有办法在微信小程序中愉快的使用SVG图标了吗？我们先来分析一下，对于使用SVG图标我们有哪些需求：

  • 能够引入使用
  • 能够调整颜色

首先第一点是没有问题的，微信小程序支持以Image.src的形式引入SVG。接下来就是本文的重点部分了，如何让使Image形式的SVG可以改变颜色。

在最近对CSS的学习中，我发现有个属性可以可以使DOM的非透明部分投下一个阴影，这个属性就是drop-shadow，属性的值与box-shadow大致相近。通过这个属性，我们就可以为SVG图片投下个可以修改颜色的阴影，然后我们再将原来的部分隐藏掉就可以实现一个可以修改颜色的SVG图标了。

接下来我们来实践一下，首先构造好DOM结构：

?
1
2
3
<view class="svg_icon">
 <image class="svg_icon-inner" src="/path/icon.svg"/>
</view>

接下来添加CSS：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.svg_icon {
 display: inline-flex;
 width: 1em;
 height: 1em;
 overflow: hidden;
}
 
.svg_icon-inner {
 width: 1em;
 height: 1em;
 transform: translateY(-1em);
 filter: drop-shadow(0 1em 0 currentColor);
}

我来解释一下为什么要这么设置DOM结构和CSS：首先svg_icon是整个图标的容器，负责设置图标的大小（1em=父容器字体的大小），和隐藏多余的部分（即图标的原始部分），而svg_icon-inner则负责渲染SVG，并投下有颜色的阴影，通过给svg_icon-inner设置一个与父容器相同的宽高并给其设置一个投影反方向的偏移则可以实现改变SVG颜色的需求（将投影的颜色设置为currentColor可以使得图标的颜色随着父容器的字体颜色改变）。

这个方案有个缺点，如果页面中有transform的动画并触发时，图标就会发生闪烁，具体的原因我也不太清楚，希望有大佬能够指教一下。

到此这篇关于详解如何愉快的在微信小程序中使用SVG图标的文章就介绍到这了,更多相关小程序使用SVG图标内容请搜索米米素材网以前的文章或继续浏览下面的相关文章希望大家以后多多支持米米素材网！

原文链接：https://juejin.cn/post/6936529740433997861