温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue.js中怎么动态更改svg的相关属性

发布时间:2023-02-23 15:35:26 来源:亿速云 阅读:131 作者:iii 栏目:开发技术

本篇内容介绍了“Vue.js中怎么动态更改svg的相关属性”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

怎样将一个远程的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图标的宽、高、颜色值等。要实现这样的功能有以下几个小点:

  • 将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');

处理前的效果图:

Vue.js中怎么动态更改svg的相关属性

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

Vue.js中怎么动态更改svg的相关属性

最终完整的代码如下:

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的相关属性”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI