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.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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/14555.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/14555.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/14555.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！