目錄

• 引言
• 怎樣將一個遠程的svg圖標資源"下載"到本地
• 怎樣更改svgdom結構里面的相關屬性

引言

公司項目中有一個關于圖標庫管理的需求，大致需要在頁面能夠動態去更改對應svg圖標的大小、顏色等(這里的更改顏色限制線性圖標)。在網上查找了相關資料，做了技術的預研及demo的編寫，在此記錄一下。

怎樣將一個遠程的svg圖標資源"下載"到本地

首頁我們可以利用XMLHttpRequest對象來請求對應的svg圖標的遠程資源鏈接地址，并監聽實現XMLHttpRequest對象的load事件，將返回的資源進行dom對象的轉換、string轉換為xml。

代碼如下：

const xhr = new XMLHttpRequest();      xhr.open("GET", "https://www.xx.com/img/xxx.svg", true);      xhr.send();      /* 監聽xhr對象 */      xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {  console.log(xhr.responseXML, "xhr.responseXML---------")}      };      xhr.addEventListener("load", () => {const resXML = stringToXml(xhr.response);this.svgDom = resXML.documentElement.cloneNode(true);      });

這里的工具函數stringToXml的完整代碼如下：

//將字符串轉化成dom對象;string轉換為xmlfunction stringToXml (xmlString) {  let xmlDoc;  if (typeof xmlString == "string") {    //FF    if (document.implementation.createDocument) {      const parser = new DOMParser();      xmlDoc = parser.parseFromString(xmlString, "text/xml");    } else if (window.ActiveXObject) {      // eslint-disable-next-line no-undef      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");      xmlDoc.async = false;      xmlDoc.loadXML(xmlString);    }  }  else {    xmlDoc = xmlString;  }  return xmlDoc;}

這樣就可以獲取到遠程svg資源對應的dom結構了。

怎樣更改svgdom結構里面的相關屬性

產品的要求需要能夠動態更改對應svg圖標的寬、高、顏色值等。要實現這樣的功能有以下幾個小點：

• 將svgDom對象轉換成vue的虛擬dom，代碼如下：const oSerializer = new XMLSerializer()；
• 根據序列化的對象提供的serializeToString方法將svgDom對象進行字符串化；

通過svgDom對象提供的寬、高屬性值，結合正則來遍歷svgDom字符串化后的字符串，進行寬高值的替換。代碼如下：

let sXML = oSerializer.serializeToString(this.svgDom);sXML = sXML.replace(`width="${this.svgDom.width.baseVal.value}"`, "width="40"").replace(`height="${this.svgDom.height.baseVal.value}"`, "height="40"")

• 根據sXML來截取svg結構表示的字符串里對應的顏色值，并結合is-color這個插件判斷是否是一個真正的顏色，是的話，根據想要替換的顏色值進行全局替換就行。代碼如下：

let curColor = sXML.split("#")[1].substr(0, 6)      if (!isColor(`#${curColor}`)) {curColor = sXML.split("#")[1].substr(0, 3)      }      sXML = sXML.replace(new RegExp(`#${curColor}`, "gm"), "#90EE90")

• 通過Vue實例提供的extend方法創建實例并掛載到某個元素上，代碼如下：

const Profile = Vue.extend({  template: "<div id="svgTemplate">" + sXML + "</div>"});// 創建實例，并掛載到元素上new Profile().$mount("#svgTemplate");

處理前的效果圖：

處理后的效果圖(將svg寬高由原來的20變為40，將顏色值改為"#90EE90")：

最終完整的代碼如下：

testSvg () {      const xhr = new XMLHttpRequest();      xhr.open("GET", "https://www.xx.com/img/xxx.svg", true);      xhr.send();      /* 監聽xhr對象 */      xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {  console.log(xhr.responseXML, "xhr.responseXML---------")}      };      xhr.addEventListener("load", () => {const resXML = stringToXml(xhr.response);this.svgDom = resXML.documentElement.cloneNode(true);/* 將svgDom對象轉換成vue的虛擬dom */const oSerializer = new XMLSerializer();let sXML = oSerializer.serializeToString(this.svgDom);let curColor = sXML.split("#")[1].substr(0, 6)if (!isColor(`#${curColor}`)) {  curColor = sXML.split("#")[1].substr(0, 3)}sXML = sXML.replace(`width="${this.svgDom.width.baseVal.value}"`, "width="40"").replace(`height="${this.svgDom.height.baseVal.value}"`, "height="40"").replace(new RegExp(`#${curColor}`, "gm"), "#90EE90")const Profile = Vue.extend({  template: "<div id="svgTemplate">" + sXML + "</div>"});// 創建實例，并掛載到元素上new Profile().$mount("#svgTemplate");      });    },

以上就是Vue.js中動態更改svg的相關屬性詳解的詳細內容，更多關于Vue.js動態更改svg屬性的資料請關注其它相關文章！