Vue3 中使用svg文件模板

在 Vue3 中，可以使用 `<svg>` 标签作为 SVG 文件的模板，来实现更高级的 SVG 图形绘制。以下是一个简单的例子：

<template>
  <div>
    <svg width="100" height="100">
      <rect :width="rectWidth" height="50" fill="red" />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rectWidth: 50,
    };
  },
};
</script>

这里的 SVG 图形使用了 `<rect>` 标签来绘制一个矩形，矩形的宽度使用了 Vue 组件的数据属性 `rectWidth`。可以通过修改 `rectWidth` 的值来动态地调整矩形的宽度。

除了 `<rect>` 标签，SVG 还有许多其他的标签可以用来绘制各种形状，例如 `<circle>`、`<ellipse>`、`<path>` 等等。可以参考 SVG 的文档来了解更多的绘制方式。