vue 动态创建svg 添加ref

在Vue中，可以使用`v-html`指令动态创建SVG，并通过`ref`属性来引用它。下面是一个示例：

<template>
  <div>
    <div v-html="svgContent" ref="svgRef"></div>
    <button @click="getSvgElement">获取SVG元素</button>
 </div>
</template>

<script>
export default {
  data() {
    return {
      svgContent: '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" /></svg>'
    };
  },
  methods: {
    getSvgElement() {
      const svgElement = this.$refs.svgRef;
      console.log(svgElement);
    }
  }
};
</script>

在上面的示例中，`svgContent`是一个包含SVG代码的字符串，通过`v-html`指令将其动态渲染到页面上。然后，可以使用`this.$refs.svgRef`来获取对应的SVG元素。

当点击按钮时，调用`getSvgElement`方法，该方法通过`this.$refs.svgRef`获取到SVG元素，并将其打印到控制台上。