业务需求(vue项目中)

1.页面展示svg内容

2.监听svg内部的点击事件

3.动态改变svg内部元素的属性和值

html标签

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

直接将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("...");