乐趣区

关于vue.js:VueJs中动态更改svg的相关属性

jiezi

公司我的项目中有一个对于图标库治理的需要，大抵须要在页面可能动静去更改对应 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 转换为 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 图标的宽、高、色彩值等。要实现这样的性能有以下几个小点：

  1. 将 svgDom 对象转换成 vue 的虚构 dom，代码如下：const oSerializer = new XMLSerializer()；
  2. 依据序列化的对象提供的 serializeToString 办法将 svgDom 对象进行字符串化；

  3. 通过 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"')
  4. 依据 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')
  1. 通过 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');
      });
    },
退出移动版