vue3 svg 鼠标位置滚动变大或缩小

<template>

  <svg

    :width="svgWidth"

    :height="svgHeight"

    @wheel="handleWheel"

  >

    <!-- SVG内容 -->

  </svg>

</template>

<script setup>

import { ref } from 'vue';

const svgWidth = ref(500);

const svgHeight = ref(500);

function handleWheel(event) {

  event.preventDefault();

  const scaleFactor = 1.1; // 定义缩放因子

  const currentScale = svgWidth.value / 500; // 假设初始尺寸为 500x500

  if (event.deltaY < 0) {

    // 鼠标向上滚动，放大

    svgWidth.value = svgWidth.value + (svgWidth.value * scaleFactor);

    svgHeight.value = svgHeight.value + (svgHeight.value * scaleFactor);

  } else {

    // 鼠标向下滚动，缩小

    svgWidth.value = svgWidth.value - (svgWidth.value * scaleFactor);

    svgHeight.value = svgHeight.value - (svgHeight.value * scaleFactor);

  }

}

</script>