Vue中动态加载SVG文件并绑定事件、修改节点数据

Vue中动态加载SVG文件并绑定事件、修改节点数据

大致的流程是这样的：实现这个需求是首先通过一个工具（drawio）去自定义绘制图形，然后导出一个svg格式的文件，后端搞了一下drawio工具的源码，在导出的时候，为绘制的图形上每个节点都去绑定了一个id（具体是怎么搞得我一个前端也不是太清楚），最后导出，然后前端需要去加载svg，然后每个节点都会有对应的数据（就是根据绑定的id去获取），然后有些节点上还可能有图片，还需要替换，还可能为每个节点去绑定事件做一些事情。然后还使用了d3实现了让svg可以缩放拖拽。大概是这个亚子

先上一张自己测试用的svg

首先说下思路：

1. 首先咱们要通过XMLHttpRequest的方式去加载svg，因为这样才能去操作svg中的dom元素

2. 接下来就是拿到里面的dom元素集合，遍历为某些节点（当然也可以为整个svg）绑定事件，注意：这里绑定的事件是在window层上，我们要向window上挂载绑定的方法

3. 然后就可以把svg挂载到容器dom上，这里注意：不能通过DOM.appendChild的方式去追加，要先转成虚拟dom并挂载，否则绑定的事件失效

4. 挂载dom上之后就能看到正常的我们加上绑定事件的svg了，这时候也在dom上了，咱们可以去获取里面的dom，循环遍历去获取每个节点的id，并找到里面对应的font标签并将其数据进行修改，除了font标签外、如果有图片还会有image标签

然后下面是完整的代码，代码注释还是蛮详细的，希望可以帮到大家

最后是搞完之后的效果：

补充：

上面代码通过

var Profile = Vue.extend({ template: "

这个方式去挂载，如果使用错误警告或者有问题可以看下我上篇博文：

​​【解决】You are using the runtime-only build of Vue where the template compiler is not available​​

上面使用了d3，记得npm 装一下呢

npm install d3

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。