js实现svga编辑器

背景

项目中有好几处需要对svga进行编辑的，索性这次做成一个小工具，方便后续使用

界面展示

主界面如下

编辑器主要特性

• svga可以使用本地文件，也可以使用url
• 支持插槽查询
• 支持插槽编辑，可以写入文本 也可以写入图片
• 支持svga分解，把svga里面的图片都分解出来
• 实时预览

其他界面展示

1. svga分解

2. svga预览

3. svga编辑，通过setText 方式，插槽名：seat_number ，配置对象

 {
                "text": "8",
                "size": "26px",
                "color": "#ffffff",
                "family": "Microsoft YaHei"
  }

4. svga编辑，通过setImg方式，同样的插槽名，随便找个图片，效果如下

测试用到的素材和代码都在 https://github.com/YalongYan/svga-editer

参考：https://svga.dev/