脚本宝典收集整理的这篇文章主要介绍了详解如何愉快的在微信小程序中使用SVG图标，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
SVG近几年因各种优势被大量的应用，遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。
那么，真的就没有办法在微信小程序中愉快的使用SVG图标了吗？我们先来分析一下，对于使用SVG图标我们有哪些需求：
首先第一点是没有问题的，微信小程序支持以Image.src的形式引入SVG。接下来就是本文的重点部分了，如何让使Image形式的SVG可以改变颜色。
在最近对CSS的学习中，我发现有个属性可以可以使DOM的非透明部分投下一个阴影，这个属性就是drop-shadow，属性的值与box-shadow大致相近。通过这个属性，我们就可以为SVG图片投下个可以修改颜色的阴影，然后我们再将原来的部分隐藏掉就可以实现一个可以修改颜色的SVG图标了。
接下来我们来实践一下，首先构造好DOM结构：
<view class="svg_icon"> <image class="svg_icon-inner" src="/path/icon.svg"/> </view>
接下来添加CSS：
.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图标内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的详解如何愉快的在微信小程序中使用SVG图标全部内容，希望文章能够帮你解决详解如何愉快的在微信小程序中使用SVG图标所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。