Vue.js中动态更改svg的相关属性详解

蓝天好美

引言

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

怎样将一个远程的svg图标资源"下载"到本地

首页我们可以利用

1. XMLHttpRequest

复制代码

对象来请求对应的svg图标的远程资源链接地址，并监听实现

1. XMLHttpRequest

复制代码

对象的

1. load

复制代码

事件，将返回的资源进行

1. dom

复制代码

对象的转换、string转换为xml。
代码如下：

1. const xhr = new XMLHttpRequest();
   
2.       xhr.open('GET', 'https://www.xx.com/img/xxx.svg', true);
   
3.       xhr.send();
   
4.       /* 监听xhr对象 */
   
5.       xhr.onreadystatechange = function () {
   
6.         if (xhr.readyState == 4 && xhr.status == 200) {
   
7.           console.log(xhr.responseXML, 'xhr.responseXML---------')
   
8.         }
   
9.       };
   
10.       xhr.addEventListener('load', () => {
    
11.         const resXML = stringToXml(xhr.response);
    
12.         this.svgDom = resXML.documentElement.cloneNode(true);
    
13.       });

复制代码

这里的工具函数

1. stringToXml

复制代码

的完整代码如下：

1. //将字符串转化成dom对象;string转换为xml
   
2. function stringToXml (xmlString) {
   
3.   let xmlDoc;
   
4.   if (typeof xmlString == "string") {
   
5.     //FF
   
6.     if (document.implementation.createDocument) {
   
7.       const parser = new DOMParser();
   
8.       xmlDoc = parser.parseFromString(xmlString, "text/xml");
   
9.     } else if (window.ActiveXObject) {
   
10.       // eslint-disable-next-line no-undef
    
11.       xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    
12.       xmlDoc.async = false;
    
13.       xmlDoc.loadXML(xmlString);
    
14.     }
    
15.   }
    
16.   else {
    
17.     xmlDoc = xmlString;
    
18.   }
    
19.   return xmlDoc;
    
20. }

复制代码

这样就可以获取到远程svg资源对应的

1. dom

复制代码

结构了。

怎样更改svgdom结构里面的相关属性

产品的要求需要能够动态更改对应svg图标的宽、高、颜色值等。要实现这样的功能有以下几个小点：

• 将svgDom对象转换成vue的虚拟dom，代码如下：
  1. const oSerializer = new XMLSerializer()

  复制代码
  ；
  
• 根据序列化的对象提供的
  1. serializeToString

  复制代码
  方法将
  1. svgDom

  复制代码
  对象进行字符串化；
  

通过

1. svgDom

复制代码

对象提供的宽、高属性值，结合正则来遍历

1. svgDom

复制代码

字符串化后的字符串，进行宽高值的替换。代码如下：

1. let sXML = oSerializer.serializeToString(this.svgDom);
   
2. sXML = sXML.replace(`width="${this.svgDom.width.baseVal.value}"`, 'width="40"').replace(`height="${this.svgDom.height.baseVal.value}"`, 'height="40"')

复制代码

• 根据
  1. sXML

  复制代码
  来截取
  1. svg

  复制代码
  结构表示的字符串里对应的颜色值，并结合
  1. is-color

  复制代码
  这个插件判断是否是一个真正的颜色，是的话，根据想要替换的颜色值进行全局替换就行。代码如下：
  

1. let curColor = sXML.split('#')[1].substr(0, 6)
   
2.       if (!isColor(`#${curColor}`)) {
   
3.         curColor = sXML.split('#')[1].substr(0, 3)
   
4.       }
   
5.       sXML = sXML.replace(new RegExp(`#${curColor}`, "gm"), '#90EE90')

复制代码

• 通过
  1. Vue

  复制代码
  实例提供的
  1. extend

  复制代码
  方法创建实例并挂载到某个元素上，代码如下：
  

1. const Profile = Vue.extend({
   
2.           template: "<div id='svgTemplate'>" + sXML + '</div>'
   
3.         });
   
4.         // 创建实例，并挂载到元素上
   
5.         new Profile().$mount('#svgTemplate');

复制代码

处理前的效果图：

处理后的效果图(将svg宽高由原来的20变为40，将颜色值改为"#90EE90")：

最终完整的代码如下：

1. 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({
   
2.           template: "<div id='svgTemplate'>" + sXML + '</div>'
   
3.         });
   
4.         // 创建实例，并挂载到元素上
   
5.         new Profile().$mount('#svgTemplate');      });    },

复制代码

以上就是Vue.js中动态更改svg的相关属性详解的详细内容，更多关于Vue.js动态更改svg属性的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/276260.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！