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://www.jb51.net/article/193416.htm

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

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

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

总结

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

(0)

相关推荐

  • vue后台管理之动态加载路由的方法

    在这里我们将会实现一个vue动态路由的案列,当用户登陆成功后,根据用户的角色,拿到他对应的菜单信息,并将它动态的载入到我们的路由中. 我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制.同样的我们也需要实现一个这样的功能. 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现. 一.思路 在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • Vue加载组件、动态加载组件的几种方式

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • vue src动态加载请求获取图片的方法

    一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, routers: this.$router.options.routes } } 3. 在需要的地方引入图片 <div class="avatar"><img :src="formData

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

    先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击交互. 初接触的时候,觉得根本没法下手呀,说说自己的思路叭, 从随着用户点击放大缩小位置不变,想到了SVG 但是需要动态加载进来呀,而且还需要需求不同节点的电流值, 从放大缩小来看, 首先想到的是 D3 在集合领导给的部分相关资料 综上: 进行了可行性的方案试探,也完成了整个功能的开发. 且听我细细

  • Vue动态加载异步组件的方法

    背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好

  • vue动态加载本地图片的处理方法

    发现问题 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个img标签在html中是这么写的: <img src="../images/demo.png"> 这种写法只能引用相对路径下的图片.不能使用绝对路径.使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理. 如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定. <img :src="src"> //data中

  • c# 动态加载dll文件,并实现调用其中的简单方法

    以下是测试代码: 新建一个classlibrary,包含两个类class1和class2,这两个类中分别有一个方法,都是返回一个字符串,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace mydll { public class Class1 { public Class1() { } public string sayhello() { ret

  • c# 动态加载dll文件,并实现调用其中的方法(推荐)

    以下是测试代码: 新建一个classlibrary,包含两个类class1和class2,这两个类中分别有一个方法,都是返回一个字符串,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace mydll { public class Class1 { public Class1() { } public string sayhello() { ret

  • 基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • springBoot如何动态加载资源文件

    目录 springBoot动态加载资源文件 构造DynamicLoadPropertySource 添加到Enviroment springBoot静态资源动态加载 举例说明 springBoot动态加载资源文件 在实际项目中资源信息如果能够动态获取在修改线上产品配置时极其方便,下面来展示一个加载动态获取资源的案例,而不是加载写死的properties文件信息. 首先构造PropertySource,然后将其添加到Enviroment中. 构造DynamicLoadPropertySource

  • 动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

随机推荐