vue动态加载SVG文件并修改节点数据的操作代码


Posted in Javascript onAugust 17, 2020

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对象 */
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {
  console.log(xhr.responseXML,'xhr.responseXML---------')
 }
 };
 xhr.addEventListener('load', () => {
 // console.log('load');
 // console.log(xhr.response,'---svg4703')
 // /* 获取 dom */
 // console.log(xhr, xhr.responseXML,'xhr.responseXML')

 const resXML = stringToXml(xhr.response);
 this.svgDom = resXML.documentElement.cloneNode(true);
 //this.svgDom = resXML
 /* 添加事件(点击事件,鼠标滚轮事件,全屏事件) */
 this.addEvents();
 /* dom重置 */
 this.resetDom();
 /* 将svgDom对象转换成vue的虚拟dom */
 var oSerializer = new XMLSerializer();
 var sXML = oSerializer.serializeToString(this.svgDom);
 var Profile = Vue.extend({
  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个方面出发。试着打印了 xhr.response

  1. 对比不显示的代码 跟显示的代码的差异点在哪里,我谷歌xml 转为 html
  2. 打印xhr.response 的时候,发现咦 其实

xhr.response

其实是有值返回的,也就是说 其实是返回了值, 不显示是因为

xhr.responseXML 这个值为null,

然后 `

resXML.documentElement.cloneNode(true);
`
没办法显示,抛错了。后续所有的操作都获取不到任何节点。

8.然后我开始试着找怎么从XML 转为HTML. 并且还发现真的有方法耶

//将字符串转化成dom对象;string转换为xml
function stringToXml(xmlString) {
 var xmlDoc;
 if (typeof xmlString == "string") {
 //FF
 if (document.implementation.createDocument) {
 var parser = new DOMParser();
 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 对应的值喽') 
},

整体SVG 动态加载的方案就这样了,
参考: https://3water.com/article/193416.htm

我们在来看D3 , D3的话,
就简单粗暴一点 直接搜索vue D3 引用,
这就不详细说明了, 需求还是蛮多的。

还有遇到一个问题,就是全屏弹窗, 结合elementUI 使用的, 操作的时候发现点击事件触发了,但是弹窗并不现实,
我刚开始以为是因为 z-index 的层级不够高,然后我尝试着浏览器动态调试,z-index: 99999999. 写了一大串的9 都不显示。

vue动态加载SVG文件并修改节点数据的操作代码

vue动态加载SVG文件并修改节点数据的操作代码

原来是需要全屏显示的时候, 都需要包含在全屏的那个DIV 。

总结

到此这篇关于vue动态加载SVG文件并修改节点数据的文章就介绍到这了,更多相关vue动态加载SVG文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
Vue如何将页面导出成PDF文件
Aug 17 #Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 #Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 #Javascript
three.js着色器材质的内置变量示例详解
Aug 16 #Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 #Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
vue.js事件处理器是什么
2017/03/20 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
js canvas实现红包照片效果
2018/08/21 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
MySQL最常见的操作语句小结
2015/05/07 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python3实现windows下同名进程监控
2018/06/21 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
python numpy库np.percentile用法说明
2020/06/08 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
总裁秘书岗位职责
2013/12/04 职场文书
银行职员自我鉴定
2014/04/20 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
抢劫罪辩护词
2015/05/21 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
SQL基础的查询语句
2021/11/11 MySQL
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android