uniapp或小程序使用SVG实现实时动态变色

已于 2024-03-06 13:54:15 修改
阅读量4.7k 收藏
点赞数
文章标签： javascript 前端框架 css
于 2022-06-17 12:04:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44622894/article/details/125330912
版权

项目场景

相关背景：

图标实时动态标色的需求，PC端一般可以直接使用 SVG 标签，修改相应的fill stroke属性值去实现变色。但是小程序端暂时不支持使用 SVG 标签。目前使用 ios 和 安卓，各家小程序都兼容比较好的是：通过背景图片的方式，svg encode, 然后通过变更 fill 值实现图标变色。

解决方案

推荐博客

西西偷西瓜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
今天，小程序正式支持 SVG
10-17
主要介绍了小程序支持SVG，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在uni-App（Vue）中使用 SVG + JS 自定义动画：模拟关键帧
未来博客
04-15 2199
问题 为什么要使用SVG来制作动画？ SVG是矢量图形，放大不会失真，而且动画看起来很丝滑，能够实现很多平面动画效果，这点是CSS动画比不上的 在Vue中使用SVG有哪些难点？ 注意载入顺序，应该在mounted() 过程中载入动画，并且记得 在destroyed() 过程之后销毁。 注意SVG内的锚点定位问题，将你所需的图形放在合适的位置上，并保证屏幕尺寸改变时不会影响到内部的位置。 示例 在此案例中，我需要制作一个Loading 图标，并在不同的页面中显示，当网络发起请求后，loading 变量会控
uni-app 如何使用svg
最新发布
BradenHan的专栏
04-27 2537
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
uni-app小程序实现svg组件
qq_38736186的博客
10-21 2585
3.封装svg组件。在components文件夹下新建 components\cus-svg\cus-svg.vue 组件。实现思路，将svg的html字符串的URI编码，作为view的背景图。并且将svg.js导出的对象挂载到全局，便于全局使用。至此svg资源便已经封装好。2.封装svg换色函数。并将其挂载到全局函数。
uniapp开发微信小程序——实现动态修改svg图标颜色
wolf艺术人生
03-25 3816
在控制台可以看到加载出来的svg图片代码如上图所示，我们只需要修改fill属性的值，就可以改变颜色。这里实现的思路是将图片展示View标签的backgroundImage属性值，这样可以通过替换svg图片代码中的颜色fill里面的值来达到动态修改图片颜色的目的。将准备好的svg的代码先转换成带data:image/svg+xml的dataUrl格式的内容。谨以此记录和分享学习成果，欢迎指教，相互学习，共同进步！一、svg代码转换成dataUrl格式。二、动态修改图片颜色。
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
HouGISer的博客
12-21 6423
文章目录小程序引用图片的几种方式如何根据主题色改变图标颜色？ 小程序引用图片的几种方式 这一期我们直入主题，教大家如何动态改变图标的颜色。 首先，我们知道小程序引用图片的方式并不多。目前小程序并不支持直接引用svg文件，也不支持直接引用本地文件。总结下来，可行的方法有如下几种： img的src引用 云文件的cloudID 图片的https链接 图片base64格式 字体图标 如uniapp的u...
uniapp 微信小程序 svga
Mummyly的博客
11-21 566
uniapp 微信小程序 svga 不支持
微信小程序里使用SVG矢量图标方法详解
10-17
在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
使用svg实现动态时钟效果
01-04
一个使用svg做的动态时钟，供大家参考，具体内容如下 怎么样很酷吧，以下是源码： <!DOCTYPE html> <html> <title>SVG clock</title> <meta ...
微信小程序里引入SVG矢量图标的方法
12-13
同时还是因为微信小程序的限制，我们要先把svg的xml编码转码为base64编码 首先，说明以下我们常见的svg矢量图是什么？下面引用百度百科的话： svg是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维...
uniapp常用图标.zip
01-15
图标 图标
使用SVG图，用一套icon,实现多主题变色
07-09
地址: https://github.com/liangmingzhe/svgIconTest.gitApp icon ...在此基础上，我做了一些改动，在使用SVG图的时候，支持自定义icon分层的填充颜色，以此做到只用一套icon实现多主题变色。注意:一个SVG对应一张图。
uniapp封装svg-icon插件
weixin_42395736的博客
08-14 2164
uniapp封装svgIcon组件，支持原始.svg文件按需引用
uniapp 微信小程序配置全局主题色、实现动态修改主题色
热门推荐
wolf艺术人生
03-28 1万+
本文的实现目标是全局配置小程序的整体主题色，包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色；第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片，关于svg图片颜色修改可以参考文章。
原生微信小程序如何动态修改svg图片颜色及尺寸、宽高（封装svgIcon组件）解决ios不显示问题
wocwin的博客
01-05 1886
原生微信小程序如何动态修改svg图片颜色及尺寸、宽高（封装svgIcon组件），解决ios不显示
uniapp 将svg转换为css可用的图标字体
xiyunmengyuan的博客
07-27 2006
1.转换平台链接 https://icomoon.io 2.转换步骤 2.1 打开https://icomoon.io/ 后，点击右上角登录旁边的icoMoon App进行登录 2.2 具体流程图 2.3 代码配置 .将style.css和fonts文件放到项目的静态资源文件下并全局设置引入 <i style="font-size: 48upx;position: absolute;left: 20rpx;color: #fff;" class="melyshop-melyshop-uniE90
uni-app实现用AI自行绘制的SVG矢量图片-base64转换法
Darbuly的博客
05-03 2557
1. 需求分析 想要在Uni-app下实现用AI自行绘制的SVG矢量图片 2. 实现思路 AI==>.svg==>base64 2.1 先用AI绘制好AI图 2.2 导出SVG格式文档 注意，导出之前先把画板固定下来 “对象-画板-适和选中的图稿” 2.3 在线转换base64 2.4 复制到CSS中应用——以stylus语法为例 ...
uni-App引入iconfont
weixin_34150224的博客
11-01 1620
uni-app 是什么 uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。 目前可以打包成Android、IOS的App、小程序 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用，我也懒得入坑 网上的教程很少，就连简...
uniapp小程序引入svg图标不显示
09-06
在使用UniApp开发小程序时，如果引入的SVG图标不显示，可能有以下几个原因： 1. 导入的SVG图标文件路径不正确：首先确保SVG图标文件的路径是正确的，可以在文件资源管理器中检查文件路径是否正确。 2. 引入SVG图标时没有正确添加文件后缀名：在引入SVG图标时，需要在文件名称后面添加正确的文件后缀名，例如：`.svg`。 3. 小程序配置文件缺少SVG图标相应的配置项：需要在小程序的配置文件（如`manifest.json`）中添加SVG图标的配置项，通常类似于下面的代码： ``` "easycom": { "autoscan": true, "custom": { "^u-(.*)": "@/components/u-$1/u-$1.vue" } } ``` 以上代码中的`^u-(.*)`是匹配SVG图标组件的自定义规则，`@/components/u-$1/u-$1.vue`是引入SVG图标组件的路径。 4. SVG图标文件本身存在兼容性问题：有些SVG图标文件可能存在兼容性问题，可能某些浏览器或小程序不支持某些SVG特性或属性，导致图标无法显示。可以尝试使用其他可用的SVG图标文件进行测试。 5. 存在其他代码错误导致问题：在引入SVG图标的过程中，如果存在其他代码错误，可能会导致图标无法正确加载和显示。可以检查代码中是否存在其他错误，并确保其他部分的代码正常运行。 如果以上方法仍无法解决问题，可以尝试搜索相关文档或资源库以获取更多帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值