引言
公司项目中有一个关于图标库管理的需求,大致需要在页面能够动态去更改对应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.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');
处理前的效果图:
处理后的效果图(将svg宽高由原来的20变为40,将颜色值改为"#90EE90"):
最终完整的代码如下:
testSvg () {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.xx.com/img/xxx.svg', true);
xhr.send();
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);
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');
});
},
以上就是Vue.js中动态更改svg的相关属性详解的详细内容,更多关于Vue.js动态更改svg属性的资料请关注编程网其它相关文章!