vue创建svg图形

要在Vue中创建SVG图形，你可以使用Vue的模板语法和内置的SVG支持。以下是一个简单的示例，帮助你开始：

1. 首先，创建一个Vue组件，并在模板中使用SVG元素进行图形绘制。例如，创建一个名为"SvgComponent"的组件：

<template>
  <svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="red" />
    <rect x="50" y="50" width="100" height="100" fill="blue" />
  </svg>
</template>

<script>
export default {
  name: 'SvgComponent',
}
</script>

在这个示例中，我们使用`<circle>`元素创建一个红色的圆形，以及使用`<rect>`元素创建一个蓝色的矩形。

2. 接下来，在你的Vue应用中使用这个组件。例如，在`App.vue`中引入和使用`SvgComponent`：

<template>
  <div id="app">
    <SvgComponent />
  </div>
</template>

<script>
import SvgComponent from './components/SvgComponent.vue'

export default {
  name: 'App',
  components: {
    SvgComponent,
  },
}
</script>

在这个示例中，我们将`SvgComponent`作为子组件添加到了应用的根组件中。

3. 最后，确保安装了Vue依赖，并启动你的Vue应用。你应该能够在页面上看到一个包含圆形和矩形的SVG图形。

这只是一个简单的示例，你可以根据需要扩展和定制SVG图形。Vue的模板语法和组件化开发可以帮助你更轻松地构建复杂的SVG图形。