vue动态加载SVG⽂件并修改节点数据的操作代码
先上⼀个马赛克图⽚叭。
接领导需求，动态实现电路图，并附带放⼤、缩⼩功能、以及不同的回路点击能弹窗显⽰相关节点的更多信息，
通俗⼀点讲：随着⽤户点击放⼤和缩⼩，点击位置保持不变，⽽且能实现点击交互。
初接触的时候，觉得根本没法下⼿呀，说说⾃⼰的思路叭，
从随着⽤户点击放⼤缩⼩位置不变，想到了SVG 但是需要动态加载进来呀，⽽且还需要需求不同节点的电流值，从放⼤缩⼩来看，⾸先想到的是 D3
在集合领导给的部分相关资料
综上：进⾏了可⾏性的⽅案试探，也完成了整个功能的开发。
且听我细细道来开发遇到的问题，以及怎处理叭
SVG 在⾕歌，以及微软中国，拼命的搜索，搜索出来有2个适合的组件，⼤多数搜索出来的都是SVG 图标，但是我这个需求是很⼤的图⽚呀，那继续换思路，
那试着把关键字换成 ‘动态加载SVG 图⽚'，这样⼜查出来引⼊SVG 图⽚可以通过 image、 Object、 embed 等等。但是这个插⼊仅限于插⼊，并不能动态修改值，那继续换思路
动态加载SVG ，发现可以通过XMLHttpRequest 请求然后添加事件、以及重新渲染DOM 元素。
那先上⼀段代码
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', this.svgUrl, true);
xhr.send();
/* 监听xhr对象 */
if (adyState == 4 && xhr.status == 200) {
console.sponseXML,'sponseXML---------')
}
};
xhr.addEventListener('load', () => {
/
/ console.log('load');
// console.sponse,'---svg4703')
// /* 获取 dom */
// console.log(xhr, sponseXML,'sponseXML')
const resXML = sponse);
this.svgDom = resXML.documentElement.cloneNode(true);
//this.svgDom = resXML
/* 添加事件（点击事件，⿏标滚轮事件，全屏事件） */
this.addEvents();
/* dom重置 */
/
* 将svgDom对象转换成vue的虚拟dom */
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(this.svgDom);
var Profile = d({
template: "<div id='svgTemplate'>" + sXML + '</div>'
});
// 创建实例，并挂载到元素上
new Profile().$mount('#svgTemplate');
});
好，我们继续。
既然是要根据不同的⽤户⽅，显⽰出来不同的模板，那么肯定是需要远程动态加载，于是⾃⼰丢了⼀个模板到前端静态服务器上，就开始对XMLHTTP的load 事件之后对代码进⾏解析。
4.加载之后，发现⼜遇到⼀个问题了，跨域
跨域是⽼⽣常谈的问题了，但是普通的请求我可以z后端设置CORS 的允许投，那⼀个SVG 我表⽰根本没法下⼿呀，于是我换了个思路，我们先跨域跨域，本地装个插件如何，最后把⽂件放在前端的服务器不就解决了，
然后我就真的傻傻的这样完成了，开发以及跟后端讨论的过程。
5.项⽬经理在继续和我沟通，这个SVG 模板需要客户进去上传，也就是说，svg ⽂件需要专门上传到OSS 的⽂件服务器上，那么我想到的第⼀个问题是，肯定会跨域呀，这可咋办呢，急死我了，5555555…
6.当我把不同域名的SVG ⽂件通过XMLHTTP 引⼊的时候，发现SVG 图⽚根本显⽰不了，我不停的去切换2个⽂件地址。我尝试着百度、google 发现都没到合适的解决⽅案咋办呢，⼜不能告诉项⽬经理说，你花了1星期的预演，之前说可以的，现在突然不⾏了。
7.于是我看下浏览器报错在从2个⽅⾯出发。试着打印了 sponse
1. 对⽐不显⽰的代码跟显⽰的代码的差异点在哪⾥，我⾕歌xml 转为 html
2. 打印sponse 的时候，发现咦其实
其实是有值返回的，也就是说其实是返回了值，不显⽰是因为
然后 `
resXML.documentElement.cloneNode(true);
`
没办法显⽰，抛错了。后续所有的操作都获取不到任何节点。
8.然后我开始试着怎么从XML 转为HTML. 并且还发现真的有⽅法耶
//将字符串转化成dom对象;string转换为xml
function stringToXml(xmlString) {
var xmlDoc;
if (typeof xmlString == "string") {
//FF
if (ateDocument) {
var parser = new DOMParser();
svg图片怎么使用
xmlDoc = parser.parseFromString(xmlString, "text/xml");
} else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xmlString);
}
}
else {
xmlDoc = xmlString;
}
return xmlDoc;
}
addEvents() {
console.log('这⾥⾃⼰写处理代码哈')
},
resetDom() {
console.log('这⾥写需要改变的节点的id 对应的值喽')
},
我们在来看D3 ， D3的话，
就简单粗暴⼀点直接搜索vue D3 引⽤，
这就不详细说明了，需求还是蛮多的。
还有遇到⼀个问题，就是全屏弹窗，结合elementUI 使⽤的，操作的时候发现点击事件触发了，但是弹窗并不现实，
我刚开始以为是因为 z-index 的层级不够⾼，然后我尝试着浏览器动态调试，z-index: 99999999. 写了⼀⼤串的9 都不显⽰。
原来是需要全屏显⽰的时候，都需要包含在全屏的那个DIV 。
总结
到此这篇关于vue动态加载SVG⽂件并修改节点数据的⽂章就介绍到这了，更多相关vue动态加载SVG⽂件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。