脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.js动态更改svg属性

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

 更新时间：2023年02月23日 14:24:09   作者：前端扫地僧  
这篇文章主要为大家介绍了Vue.js中动态更改svg的相关属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

 公司项目中有一个关于图标库管理的需求，大致需要在页面能够动态去更改对应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图标的宽、高、颜色值等。要实现这样的功能有以下几个小点：

  • 将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+axios实现文件下载及vue中使用axios的实例

    vue+axios实现文件下载及vue中使用axios的实例

    这篇文章主要介绍了vue+axios实现文件下载及vue中使用axios的实例,需要的朋友可以参考下
    2018-09-09
  • vue封装Animate.css动画库的使用方式

    vue封装Animate.css动画库的使用方式

    这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 父子组件生命周期及子组件获取数据传值问题剖析

    父子组件生命周期及子组件获取数据传值问题剖析

    这篇文章主要介绍了父子组件生命周期及子组件获取数据问题剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-10-10
  • Vue实现浏览器端扫码功能

    Vue实现浏览器端扫码功能

    本文主要介绍，通过使用基于 vue技术栈的前端开发技术，在浏览器端调起摄像头，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理，对vue浏览器扫码功能的实现代码感兴趣的朋友一起看看吧
    2021-10-10
  • uni-app无限级树形组件简单实现代码

    uni-app无限级树形组件简单实现代码

    文章介绍了如何在uni-app中简单封装一个无限级树形组件,该组件可以无线嵌套,展开和收缩,并获取子节点数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-01-01
  • elementui使用el-upload组件如何实现自定义上传

    elementui使用el-upload组件如何实现自定义上传

    这篇文章主要介绍了elementui使用el-upload组件如何实现自定义上传，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue中的transition封装组件的实现方法

    Vue中的transition封装组件的实现方法

    这篇文章主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue.js中class与style的增强绑定实现方法

    Vue.js中class与style的增强绑定实现方法

    由于Class和Style绑定使用频繁，字符串拼接麻烦且易错，因此，Vue.js 做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组，本文给大家讲解Vue.js中class与style的增强绑定知识，感兴趣的朋友一起看看吧
    2023-04-04
  • Uniapp 实现顶部标签页切换功能(详细步骤)

    Uniapp 实现顶部标签页切换功能(详细步骤)

    本文介绍了如何在UniApp中实现顶部标签页切换功能,u-tab-bar组件提供了便捷的标签切换功能和丰富的样式选项,而swiper组件则更加灵活,支持自定义切换方式,根据自己的需求选择合适的方式实现顶部标签页切换,感兴趣的朋友一起看看吧
    2025-02-02
  • vue中radio根据动态值绑定checked无效的解决

    vue中radio根据动态值绑定checked无效的解决

    这篇文章主要介绍了vue中radio根据动态值绑定checked无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03

最新评论