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

为了实现vue动态渲染svg以及添加点击事件，需要采用SVG语言作为矢量图形语言，使用vue指令中的v-html渲染SVG字符串，以及添加@click事件监听器。

实现步骤：

1. 准备SVG字符串。可以是文件、变量定义或远程获取的内容。例如以下的SVG字符串：

<svg width="100" height="100" viewBox="0 0 100 100" >
  <rect x="10" y="10" width="80" height="80" fill="#F48FB1" />
</svg>

1. 在vue模板中使用v-html指令，将步骤1中的SVG字符串渲染到页面上。渲染时需要使用v-html指令对SVG进行HTML转义，以防止XSS攻击。

<template>
  <div v-html="svg"></div>
</template>

1. 响应点击事件，给vue组件添加@click事件监听器，实现点击SVG图形时出发相应的事件。

<template>
  <div v-html="svg" @click="onClick"></div>
</template>

1. 在vue组件的方法中实现点击事件处理函数，在该函数内可以执行各种JavaScript代码，例如在控制台输出一些信息。

methods: {
  onClick() {
    console.log('SVG clicked!');
  }
}

示例：

1. 静态渲染SVG

在模板中直接引入SVG文件，使用v-html指令渲染SVG图形。

<template>
  <div>
    <div v-html="svg"></div>
  </div>
</template>

<script>
import MySVG from '@/assets/my-svg.svg';

export default {
  data() {
    return {
      svg: MySVG
    };
  }
};
</script>

1. 动态生成SVG

在逻辑代码中定义SVG字符串，并通过v-html指令渲染SVG图形。

<template>
  <div>
    <div v-html="svg"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      svg: '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" fill="#F48FB1" /></svg>'
    };
  }
};
</script>