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

目录

• 引言
• 怎样将一个远程的svg图标资源"下载"到本地
• 怎样更改svgdom结构里面的相关属性

引言

 公司项目中有一个关于图标库管理的需求，大致需要在页面能够动态去更改对应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');
      }
    );
    }
    ,

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

• vue项目中自动导入svg并愉快的使用方式
• vue项目引入svg图标的完整步骤
• Vue3+Element Plus使用svg加载iconfont的处理方法
• vue3+vue-cli4中使用svg的方式详解(亲测可用)
• vue3+vite2中使用svg的方法详解(亲测可用)
• Vue3中级指南之如何在vite中使用svg图标详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！