公司我的项目中有一个对于图标库治理的需要，大抵须要在页面可能动静去更改对应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'); }); },