先上一個(gè)馬賽克圖片叭。

接領(lǐng)導(dǎo)需求，動(dòng)態(tài)實(shí)現(xiàn)電路圖， 并附帶放大、縮小功能、 以及不同的回路點(diǎn)擊能彈窗顯示相關(guān)節(jié)點(diǎn)的更多信息，
通俗一點(diǎn)講： 隨著用戶點(diǎn)擊放大和縮小， 點(diǎn)擊位置保持不變，而且能實(shí)現(xiàn)點(diǎn)擊交互。
初接觸的時(shí)候，覺得根本沒法下手呀，說說自己的思路叭，

• 從隨著用戶點(diǎn)擊放大縮小位置不變，想到了SVG 但是需要?jiǎng)討B(tài)加載進(jìn)來呀，而且還需要需求不同節(jié)點(diǎn)的電流值，
• 從放大縮小來看， 首先想到的是 D3
• 在集合領(lǐng)導(dǎo)給的部分相關(guān)資料
• 綜上： 進(jìn)行了可行性的方案試探，也完成了整個(gè)功能的開發(fā)。

且聽我細(xì)細(xì)道來開發(fā)遇到的問題，以及怎處理叭

• SVG 在 谷歌， 以及 微軟中國，拼命的搜索，搜索出來有2個(gè)適合的組件， 大多數(shù)搜索出來的都是SVG 圖標(biāo)，但是我這個(gè)需求是很大的圖片呀， 那繼續(xù)換思路，
• 那試著把關(guān)鍵字換成 ‘動(dòng)態(tài)加載SVG 圖片'， 這樣又查出來引入SVG 圖片 可以通過 image、 Object、 embed 等等。 但是這個(gè)插入僅限于插入，并不能動(dòng)態(tài)修改值， 那繼續(xù)換思路
• 動(dòng)態(tài)加載SVG ，發(fā)現(xiàn)可以通過XMLHttpRequest 請(qǐng)求然后 添加事件、以及重新渲染DOM 元素。
  

那先上一段代碼

```javascript
 const xhr = new XMLHttpRequest();
 xhr.open('GET', this.svgUrl, true);
 xhr.send();
 /* 監(jiān)聽xhr對(duì)象 */
 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
 /* 添加事件（點(diǎn)擊事件，鼠標(biāo)滾輪事件,全屏事件） */
 this.addEvents();
 /* dom重置 */
 this.resetDom();
 /* 將svgDom對(duì)象轉(zhuǎn)換成vue的虛擬dom */
 var oSerializer = new XMLSerializer();
 var sXML = oSerializer.serializeToString(this.svgDom);
 var Profile = Vue.extend({
  template: "<div id='svgTemplate'>" + sXML + '</div>'
 });
 // 創(chuàng)建實(shí)例，并掛載到元素上
 new Profile().$mount('#svgTemplate');
 });

好，我們繼續(xù)。
既然是要根據(jù)不同的用戶方，顯示出來不同的模板，那么肯定是需要遠(yuǎn)程動(dòng)態(tài)加載， 于是自己丟了一個(gè)模板到前端靜態(tài)服務(wù)器上，就開始對(duì)XMLHTTP的load 事件之后對(duì)代碼進(jìn)行解析。

4.加載之后，發(fā)現(xiàn)又遇到一個(gè)問題了， 跨域
跨域是老生常談的問題了，但是普通的請(qǐng)求我可以找z后端設(shè)置CORS 的允許投，那一個(gè)SVG 我表示 根本沒法下手呀， 于是我換了個(gè)思路，我們先跨域跨域，本地裝個(gè)插件如何， 最后把文件放在前端的服務(wù)器不就解決了，
然后我就真的傻傻的這樣完成了，開發(fā)以及跟后端討論的過程。

5.項(xiàng)目經(jīng)理在繼續(xù)和我溝通， 這個(gè)SVG 模板需要客戶進(jìn)去上傳，也就是說，svg 文件需要專門上傳到OSS 的文件服務(wù)器上，那么我想到的第一個(gè)問題是，肯定會(huì)跨域呀， 這可咋辦呢， 急死我了，5555555…

6.當(dāng)我把不同域名的SVG 文件通過XMLHTTP 引入的時(shí)候，發(fā)現(xiàn)SVG 圖片根本顯示不了，我不停的去切換2個(gè)文件地址。我嘗試著百度、google 發(fā)現(xiàn)都沒找到合適的解決方案咋辦呢， 又不能告訴項(xiàng)目經(jīng)理說，你花了1星期的預(yù)演，之前說可以的，現(xiàn)在突然不行了。

7.于是我看下瀏覽器報(bào)錯(cuò)在從2個(gè)方面出發(fā)。試著打印了 xhr.response

1. 對(duì)比不顯示的代碼 跟顯示的代碼的差異點(diǎn)在哪里，我谷歌xml 轉(zhuǎn)為 html
2. 打印xhr.response 的時(shí)候，發(fā)現(xiàn)咦 其實(shí)

xhr.response

其實(shí)是有值返回的，也就是說 其實(shí)是返回了值， 不顯示是因?yàn)?/p>

xhr.responseXML 這個(gè)值為null，

然后 `

resXML.documentElement.cloneNode(true);
`
沒辦法顯示，拋錯(cuò)了。后續(xù)所有的操作都獲取不到任何節(jié)點(diǎn)。

8.然后我開始試著找怎么從XML 轉(zhuǎn)為HTML. 并且還發(fā)現(xiàn)真的有方法耶

//將字符串轉(zhuǎn)化成dom對(duì)象;string轉(zhuǎn)換為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('這里寫需要改變的節(jié)點(diǎn)的id 對(duì)應(yīng)的值嘍') 
},

整體SVG 動(dòng)態(tài)加載的方案就這樣了，
參考： http://www.fzitv.net/article/193416.htm

我們?cè)趤砜碊3 ， D3的話，
就簡單粗暴一點(diǎn) 直接搜索vue D3 引用，
這就不詳細(xì)說明了， 需求還是蠻多的。

還有遇到一個(gè)問題，就是全屏彈窗， 結(jié)合elementUI 使用的， 操作的時(shí)候發(fā)現(xiàn)點(diǎn)擊事件觸發(fā)了，但是彈窗并不現(xiàn)實(shí)，
我剛開始以為是因?yàn)?z-index 的層級(jí)不夠高，然后我嘗試著瀏覽器動(dòng)態(tài)調(diào)試，z-index: 99999999. 寫了一大串的9 都不顯示。

原來是需要全屏顯示的時(shí)候， 都需要包含在全屏的那個(gè)DIV 。

總結(jié)

到此這篇關(guān)于vue動(dòng)態(tài)加載SVG文件并修改節(jié)點(diǎn)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)加載SVG文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論