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
- 對比不顯示的程式碼 跟顯示的程式碼的差異點在哪裡，我谷歌xml 轉為 html
- 列印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://blog.csdn.net/weixin_42118466/article/details/105814933
我們在來看D3 ， D3的話，
就簡單粗暴一點 直接搜尋vue D3 引用，
這就不詳細說明了， 需求還是蠻多的。
還有遇到一個問題，就是全屏彈窗， 結合elementUI 使用的， 操作的時候發現點選事件觸發了，但是彈窗並不現實，
我剛開始以為是因為 z-index 的層級不夠高，然後我嘗試著瀏覽器動態除錯，z-index: 99999999. 寫了一大串的9 都不顯示。
原來是需要全屏顯示的時候， 都需要包含在全屏的那個DIV 。
總結
到此這篇關於vue動態載入SVG檔案並修改節點資料的文章就介紹到這了,更多相關vue動態載入SVG檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！