Vue中如何经过XMLHttpRequest调整svg的属性

发布时间：2023-06-09 11:11:33 所属栏目：语言来源：

导读：在实际应用中，我们有时候会遇到“Vue中如何通过XMLHttpRequest调整svg的属性”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“Vue中如何通过XMLHttpRequest调整svg的属性&rd

在实际应用中，我们有时候会遇到“Vue中如何通过XMLHttpRequest调整svg的属性”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“Vue中如何通过XMLHttpRequest调整svg的属性”文章能帮助大家解决问题。

公司项目中有一个关于图标库管理的需求，大致需要在页面能够动态去更改对应svg图标的大小、颜色等(这里的更改颜色限制线性图标)。在网上查找了相关资料，做了技术的预研及demo的编写，在此记录一下。

首页我们可以利用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转换为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;

}

这样就可以获取到远程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');

最终完整的代码如下：

testSvg () {