详解如何愉快的在微信小程序中使用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图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于JavaScript循环链表实现的相关资料,循环链表和单向链表很相似,唯一的区别是循环链表的尾节点是指向头节点的,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格，感兴趣的朋友可以参考一下2016-01-01
javascript中没有像c#,java那样的哈希表(hashtable), 然而，javascript中的Array也只有一些类似于'哈希表'的非常简单功能。2009-10-10
这篇文章主要介绍了ES6 javascript中Class类继承用法,结合实例形式较为详细的分析了ES6继承的基本用法、相关属性、方法与使用技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了js定时器实现倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Bootstrap Table使用整理（三）的相关资料,需要的朋友可以参考下2017-06-06
JavaScript中的作用域与闭包、原型与原型链、异步与单线程
JavaScript的三座大山指的是:作用域和闭包、原型和原型链、异步与单线程,这些概念在日常的开发工作中经常被提及,并对我们理解和编写高质量的JavaScript代码至关重要2024-02-02
考虑到 JS 中的错误可比服务器端的代码产生的错误要多得多，并且还难以发现及修正，所以 JS 代码必须有异常处理以及全局一场处理。2015-06-06
这篇文章主要介绍了threejs 模型添加文字的几种方式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
js利用prototype调用Array的slice方法示例
这篇文章主要介绍了如何利用js的prototype调用Array的slice方法,需要的朋友可以参考下2014-06-06
最新评论