详解如何愉快的在⼩程序中使⽤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图标内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论