vue动态渲染svg、添加点击事件

最新推荐文章于 2024-08-03 11:48:07 发布

前端小讴

最新推荐文章于 2024-08-03 11:48:07 发布

阅读量8.2k

点赞数 2

分类专栏： Vue全家桶文章标签： javascript vue.js node.js svg

本文链接：https://blog.csdn.net/Simon9124/article/details/104817429

版权

欢迎关注[前端小讴的github]，阅读更多原创技术文章

业务需求(vue项目中)

1.页面展示svg内容
2.监听svg内部的点击事件
3.动态改变svg内部元素的属性和值

html标签

经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能（尤其是svg内部点击事件），最终采用**Vue.extend()**方法完整实现，代码也较为简洁，html结构如下：

<template>
  <div>
    <div id="svgTemplate"></div>
  </div>
</template>

直接将svg文件的内容复制粘贴到.vue文件里，是可以在标签内直接添加@click事件完成需求的，方式简单但会造成文件过长，本文不多陈述

实现思路

1.创建xhr对象

const xhr = new XMLHttpRequest();
this.svgUrl = ...; // svg的绝对地址，在浏览器中打开能看到的那个
xhr.open("GET", this.svgUrl, true);
xhr.send();

2.监听xhr对象（获取svg的dom -> 添加事件 -> 修改dom -> 转成虚拟dom并挂载）

xhr.addEventListener("load", () => {
   
	// ① 获取svg的dom
    const resXML = xhr.responseXML;
    this.svgDom = resXML.documentElement.cloneNode(true);     // console.log(this.svgDom);
    
    // ② 添加click事件
    let btn = this.svgDom.getElementById("...");
    btn.setAttribute("v-on:click", "this.handleClick()");
    // ↑↑↑ 此处注意：原生事件handleClick此时在window层，解决办法见后文

    // ③ 修改 dom
    this.svgDom.getElementById("...&