svg图元鼠标滚轮控制size，初始化size为1（vue3+ts）

如果你想在Vue 3 + TypeScript中实现SVG图元的鼠标滚轮控制尺寸，并将初始尺寸设置为1，可以按照以下步骤进行操作：

1. 在Vue项目中安装`vue-svg-inline-loader`库，该库用于加载SVG文件并以内联方式显示。

   npm install vue-svg-inline-loader

2. 创建一个Vue组件，命名为`SvgElement.vue`，并在该组件中添加SVG图元。

   <template>
     <div>
       <svg ref="svgElement" v-html="svgCode" @wheel="handleWheel"></svg>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent, ref } from "vue";

   export default defineComponent({
     data() {
       return {
         svgCode: '<circle cx="50" cy="50" r="50" fill="red"></circle>',
         size: 1
       };
     },
     methods: {
       handleWheel(event: WheelEvent) {
         event.preventDefault();
         const delta = Math.sign(event.deltaY);
         if (delta > 0) {
           this.size += 0.1;
         } else {
           this.size -= 0.1;
           if (this.size < 0.1) {
             this.size = 0.1;
           }
         }
         this.updateSvgSize();
       },
       updateSvgSize() {
         const svgElement = this.$refs.svgElement as SVGElement;
         svgElement.style.width = `${this.size}rem`;
         svgElement.style.height = `${this.size}rem`;
       }
     },
     mounted() {
       this.updateSvgSize();
     }
   });
   </script>

   <style scoped>
   svg {
     transition: width 0.2s, height 0.2s;
   }
   </style>

3. 在你的Vue页面中使用`SvgElement`组件，并传递相应的SVG代码。

   <template>
     <div>
       <svg-element></svg-element>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent } from "vue";
   import SvgElement from "@/components/SvgElement.vue";

   export default defineComponent({
     components: {
       SvgElement
     }
   });
   </script>

这样，当你在SVG元素上滚动鼠标滚轮时，尺寸会相应地增加或减小。初始尺寸为1，并且使用了Vue的响应式数据来实时更新SVG图元的大小。请确保已经安装了相关依赖并正确配置了Vue项目。