快捷導(dǎo)航

Vue.js中動(dòng)態(tài)更改svg的相關(guān)屬性詳解

更新時(shí)間：2023年02月23日 14:24:09 作者：前端掃地僧

這篇文章主要為大家介紹了Vue.js中動(dòng)態(tài)更改svg的相關(guān)屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

怎樣將一個(gè)遠(yuǎn)程的svg圖標(biāo)資源"下載"到本地

首頁我們可以利用XMLHttpRequest對(duì)象來請(qǐng)求對(duì)應(yīng)的svg圖標(biāo)的遠(yuǎn)程資源鏈接地址，并監(jiān)聽實(shí)現(xiàn)XMLHttpRequest對(duì)象的load事件，將返回的資源進(jìn)行dom對(duì)象的轉(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對(duì)象 */
      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對(duì)象;string轉(zhuǎn)換為xml
function 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;
}

這樣就可以獲取到遠(yuǎn)程svg資源對(duì)應(yīng)的dom結(jié)構(gòu)了。

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

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

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

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

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)表示的字符串里對(duì)應(yīng)的顏色值，并結(jié)合is-color這個(gè)插件判斷是否是一個(gè)真正的顏色，是的話，根據(jù)想要替換的顏色值進(jìn)行全局替換就行。代碼如下：

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

const Profile = Vue.extend({
          template: "<div id='svgTemplate'>" + sXML + '</div>'
        });
        // 創(chuàng)建實(shí)例，并掛載到元素上
        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對(duì)象 */
      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對(duì)象轉(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)建實(shí)例，并掛載到元素上
        new Profile().$mount('#svgTemplate');
      });
    },

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

您可能感興趣的文章: