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

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

先上一张自己测试用的svg

 如果使用 img标签加载出来的就是上图的效果，仅仅是一张静态图片，这样是无法实现咱们的需求的。
当时看到类似这样的需求的时候，一脸懵，之前也没做过类似的功能，不知道从何下手。。
没办法只能去找一些相关的资源、案例、百度等等，找了好多，最终还是搞出来了。

首先说下思路：

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

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

3. 然后就可以把svg挂载到容器dom上，这里注意：不能通过DOM.appendChild的方