vue用svg做个伸展图

要在Vue中使用SVG制作一个伸展图，可以按照以下步骤进行操作：

1. 准备SVG文件，并将其保存在Vue项目的assets文件夹中。

2. 在Vue组件中引入SVG文件，可以使用Vue的component选项来注册SVG组件，例如：

<template>
  <div>
    <my-svg />
  </div>
</template>

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

export default {
  name: 'MyComponent',
  components: {
    MySvg
  }
}
</script>

3. 在SVG中添加动画效果，可以使用SVG的`<animate>`元素来实现。例如，可以添加一个`<rect>`元素和一个`<animate>`元素，使其在鼠标悬停时伸展：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="30">
    <animate attributeName="height" from="30" to="50" dur="0.5s" begin="mouseover" fill="freeze" />
  </rect>
</svg>

4. 将SVG添加到Vue组件中，并设置样式。例如，可以设置SVG组件的宽度和高度，并使用CSS来设置鼠标悬停时的样式：

<template>
  <div>
    <my-svg class="svg" />
  </div>
</template>

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

export default {
  name: 'MyComponent',
  components: {
    MySvg
  }
}
</script>

<style>
.svg {
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.svg:hover {
  fill: red;
}
</style>

这样，在Vue中就可以使用SVG制作一个伸展图了。