vue 展示svg矢量图可缩放拖动

使用插件：svg-pan-zoom

<template>
<!--  svg图-->
  <div id="svgContainer"></div>
</template>

<script>
import svgPanZoom from 'svg-pan-zoom'
import svgFile from '../datav/img/220kVscb.svg' // 路径根据实际情况调整
export default {
  name: 'svgImage',
  data () {
    return {

    }
  },
  mounted () {
    this.$nextTick(() => {
      const svgContainer = document.getElementById('svgContainer')

      // 创建一个新的object元素来加载SVG文件
      const svgElement = document.createElement('object')
      const height = svgContainer.clientHeight
      svgElement.type = 'image/svg+xml'
      svgElement.data = svgFile
      svgElement.width = '100%'
      svgElement.height = height - 20
      // 将SVG元素添加到容器中
      svgContainer.appendChild(svgElement)

      // 等待SVG加载完成后再初始化svg-pan-zoom插件
      svgElement.onload = () => {
        const panZoom = svgPanZoom(svgElement, {
          zoomEnabled: true,
          controlIconsEnabled: true
        })

        // 当组件销毁时，记得清理资源
        this.$once('hook:beforeDestroy', () => {
          panZoom.destroy()
        })
      }
    })
  }
}
</script>

<style lang="less">

</style>