vue引入svg文件及交互，使用svg-pan-zoom插件实现svg图放大缩小等操作

<template>
  <div class="svg-container" ref="svgContainer">
    <img src="@/assets/your-svg-image.svg" alt="SVG Image" @load="initSvgPanZoom" />
  </div>
</template>
 
<script>
import svgPanZoom from 'svg-pan-zoom';
 
export default {
  methods: {
    initSvgPanZoom() {
      const element = this.$refs.svgContainer;
      const instance = svgPanZoom(element.querySelector('svg'), {
        zoomEnabled: true,
        controlIconsEnabled: true,
        fit: true,
        center: true,
        minZoom: 1
      });
      
      // 你可以添加更多的事件监听或者其他交互逻辑
    }
  }
};
</script>
 
<style>
.svg-container {
  width: 100%;
  height: 600px; /* 或者其他你需要的尺寸 */
  overflow: hidden;
}
</style>

这个例子中，我们首先在模板中定义了一个div容器用来放置SVG，并通过ref属性为其设置了一个引用名。然后，我们在img标签的src属性中指定了SVG文件的路径，并添加了一个@load事件监听器，它会在图片加载完成后调用initSvgPanZoom方法。在这个方法中，我们使用了svg-pan-zoom插件来初始化SVG的放大缩小功能。通过传递配置对象，我们可以定制放大缩小的行为，例如是否启用缩放、是否显示控制图标等。