使用插件：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.clientHeightsvgElement.type = 'image/svg+xml'svgElement.data = svgFilesvgElement.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>