如何动态加载Vue中的SVG文件并修改其节点数据？

本文共计1590个文字，预计阅读时间需要7分钟。

首先展示一个马赛克图像。+ 需求：动态实现电路图，包含放大、缩小功能，以及不同的回路点击弹窗显示相关节点信息。+ 通俗一点讲：随意点击放大和缩小电路图，点击不同回路弹出显示相关信息。

先上一个马赛克图片叭。

接领导需求，动态实现电路图， 并附带放大、缩小功能、 以及不同的回路点击能弹窗显示相关节点的更多信息，
通俗一点讲： 随着用户点击放大和缩小， 点击位置保持不变，而且能实现点击交互。
初接触的时候，觉得根本没法下手呀，说说自己的思路叭，

• 从随着用户点击放大缩小位置不变，想到了SVG 但是需要动态加载进来呀，而且还需要需求不同节点的电流值，
• 从放大缩小来看， 首先想到的是 D3
• 在集合领导给的部分相关资料
• 综上： 进行了可行性的方案试探，也完成了整个功能的开发。

且听我细细道来开发遇到的问题，以及怎处理叭

• SVG 在 谷歌， 以及 微软中国，拼命的搜索，搜索出来有2个适合的组件， 大多数搜索出来的都是SVG 图标，但是我这个需求是很大的图片呀， 那继续换思路，
• 那试着把关键字换成 ‘动态加载SVG 图片'， 这样又查出来引入SVG 图片 可以通过 image、 Object、 embed 等等。 但是这个插入仅限于插入，并不能动态修改值， 那继续换思路
• 动态加载SVG ，发现可以通过XMLHttpRequest 请求然后 添加事件、以及重新渲染DOM 元素。