先上一個馬賽克圖片叭。

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

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

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

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

那先上一段代碼

```javascript const xhr = new XMLHttpRequest(); xhr.open(’GET’, this.svgUrl, true); xhr.send(); /* 監(jiān)聽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>’ }); // 創(chuàng)建實例，并掛載到元素上 new Profile().$mount(’#svgTemplate’); });

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

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

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

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

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

對比不顯示的代碼 跟顯示的代碼的差異點在哪里，我谷歌xml 轉為 html 打印xhr.response 的時候，發(fā)現咦 其實

xhr.response

其實是有值返回的，也就是說 其實是返回了值， 不顯示是因為

xhr.responseXML 這個值為null，

然后 `

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

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

//將字符串轉化成dom對象;string轉換為xmlfunction 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é)點的id 對應的值嘍’) },

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

我們在來看D3 ， D3的話，就簡單粗暴一點 直接搜索vue D3 引用，這就不詳細說明了， 需求還是蠻多的。

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

原來是需要全屏顯示的時候， 都需要包含在全屏的那個DIV 。

總結

到此這篇關于vue動態(tài)加載SVG文件并修改節(jié)點數據的文章就介紹到這了,更多相關vue動態(tài)加載SVG文件內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！