目錄

• 引言
• 怎樣將一個遠程的svg圖標資源"下載"到本地
• 怎樣更改svgdom結(jié)構(gòu)里面的相關(guān)屬性

引言

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

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

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

代碼如下：

const xhr = new XMLHttpRequest();      xhr.open("GET", "https://www.xx.com/img/xxx.svg", 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", () => {const resXML = stringToXml(xhr.response);this.svgDom = resXML.documentElement.cloneNode(true);      });

這里的工具函數(shù)stringToXml的完整代碼如下：

//將字符串轉(zhuǎn)化成dom對象;string轉(zhuǎn)換為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資源對應(yīng)的dom結(jié)構(gòu)了。

怎樣更改svgdom結(jié)構(gòu)里面的相關(guān)屬性

產(chǎn)品的要求需要能夠動態(tài)更改對應(yīng)svg圖標的寬、高、顏色值等。要實現(xiàn)這樣的功能有以下幾個小點：

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

通過svgDom對象提供的寬、高屬性值，結(jié)合正則來遍歷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"")

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

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方法創(chuàng)建實例并掛載到某個元素上，代碼如下：

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

處理前的效果圖：

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

最終完整的代碼如下：

testSvg () {      const xhr = new XMLHttpRequest();      xhr.open("GET", "https://www.xx.com/img/xxx.svg", 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", () => {const resXML = stringToXml(xhr.response);this.svgDom = resXML.documentElement.cloneNode(true);/* 將svgDom對象轉(zhuǎn)換成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>"});// 創(chuàng)建實例，并掛載到元素上new Profile().$mount("#svgTemplate");      });    },

以上就是Vue.js中動態(tài)更改svg的相關(guān)屬性詳解的詳細內(nèi)容，更多關(guān)于Vue.js動態(tài)更改svg屬性的資料請關(guān)注其它相關(guān)文章！