服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 详解如何愉快的在微信小程序中使用SVG图标

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

2022-02-13 17:14O_o js教程

这篇文章主要介绍了详解如何愉快的在微信小程序中使用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

延伸 · 阅读

精彩推荐
  • js教程js正则表达式简单校验方法

    js正则表达式简单校验方法

    在本篇文章里小编给大家整理了一篇关于js正则表达式简单校验方法,有需要的朋友们可以参考下。...

    小妮浅浅11272021-12-24
  • js教程微信小程序弹窗禁止页面滚动的实现代码

    微信小程序弹窗禁止页面滚动的实现代码

    这篇文章主要介绍了微信小程序弹窗禁止页面滚动的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需...

    任我行RQ5592021-12-23
  • js教程js事件模型与自定义事件实例解析

    js事件模型与自定义事件实例解析

    JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。本文将对其具体实现代码进行解析,需要的朋友一起来看下吧...

    caihg5672021-12-15
  • js教程JavaScript实现瀑布流布局的3种方式

    JavaScript实现瀑布流布局的3种方式

    这篇文章主要为大家详细介绍了JavaScript实现瀑布流布局的3种方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    杏子_10247432021-12-20
  • js教程JS中锚点链接点击平滑滚动并自由调整到顶部位置

    JS中锚点链接点击平滑滚动并自由调整到顶部位置

    这篇文章主要介绍了JS中锚点链接点击平滑滚动并自由调整到顶部位置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...

    是这样的三月6522022-01-19
  • js教程详解uniapp的全局变量实现方式

    详解uniapp的全局变量实现方式

    这篇文章主要介绍了详解uniapp的全局变量实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    茧君11012021-12-29
  • js教程玩转 Mockjs,前端也能跑得很溜

    玩转 Mockjs,前端也能跑得很溜

    mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 mock.js 的语法。...

    前端人4832022-01-05
  • js教程微信小程序tab左右滑动切换功能的实现代码

    微信小程序tab左右滑动切换功能的实现代码

    这篇文章主要介绍了微信小程序tab左右滑动切换功能的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可...

    坏蛋先生5322022-01-19