Vue.js中動態(tài)更改svg的相關(guān)屬性詳解
引言
公司項目中有一個關(guān)于圖標(biāo)庫管理的需求,大致需要在頁面能夠動態(tài)去更改對應(yīng)svg圖標(biāo)的大小、顏色等(這里的更改顏色限制線性圖標(biāo))。在網(wǎng)上查找了相關(guān)資料,做了技術(shù)的預(yù)研及demo的編寫,在此記錄一下。
怎樣將一個遠(yuǎn)程的svg圖標(biāo)資源"下載"到本地
首頁我們可以利用XMLHttpRequest
對象來請求對應(yīng)的svg圖標(biāo)的遠(yuǎn)程資源鏈接地址,并監(jiān)聽實現(xiàn)XMLHttpRequest
對象的load
事件,將返回的資源進(jìn)行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)換為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資源對應(yīng)的dom
結(jié)構(gòu)了。
怎樣更改svgdom結(jié)構(gòu)里面的相關(guān)屬性
產(chǎn)品的要求需要能夠動態(tài)更改對應(yīng)svg圖標(biāo)的寬、高、顏色值等。要實現(xiàn)這樣的功能有以下幾個小點:
- 將svgDom對象轉(zhuǎn)換成vue的虛擬dom,代碼如下:
const oSerializer = new XMLSerializer()
; - 根據(jù)序列化的對象提供的
serializeToString
方法將svgDom
對象進(jìn)行字符串化;
通過svgDom
對象提供的寬、高屬性值,結(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)表示的字符串里對應(yīng)的顏色值,并結(jié)合is-color
這個插件判斷是否是一個真正的顏色,是的話,根據(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
實例提供的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)屬性詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue.js動態(tài)更改svg屬性的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue實現(xiàn)公共組件傳值并及時監(jiān)聽到數(shù)據(jù)更新視圖
這篇文章主要介紹了vue實現(xiàn)公共組件傳值并及時監(jiān)聽到數(shù)據(jù)更新視圖方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue?動態(tài)添加el-input的實現(xiàn)邏輯
這篇文章主要介紹了vue?動態(tài)添加el-input的實現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格
這篇文章主要介紹了vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07vue實現(xiàn)移動端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端可拖拽式icon圖標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue elementUI tree樹形控件獲取父節(jié)點ID的實例
今天小編就為大家分享一篇vue elementUI tree樹形控件獲取父節(jié)點ID的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue 報錯TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法,分享給大家,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入),需要的朋友可以參考下2023-09-09