在vue页面用能放大缩小拖拽svg

最新推荐文章于 2025-11-16 11:59:49 发布

原创最新推荐文章于 2025-11-16 11:59:49 发布 · 3.6k 阅读

13 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue应用中利用vue-svg-pan-zoom组件实现SVG图形的放大、缩小及拖拽功能。通过详细步骤指导，包括安装与配置过程，使读者能够快速上手并应用到实际项目中。

在vue页面里，能放大缩小拖拽svg，用 vue-svg-pan-zoom 组件，githbu地址 https://github.com/yanick/vue-svg-pan-zoom

安装方法：

如果没有安装，页面又用到了，vue的命令行会提示 npm install --save vue-svg-pan-zoom 安装，如果真执行这行语句，会需要很长时间，如果安装有问题，回滚的同时还会删除其他安装好的组件，然后还得执行 cnpm i 指令再安装，比较麻烦。

执行 cnpm install vue-svg-pan-zoom ，几秒钟就安装好了。

调用方法：

<template>
  <SvgPanZoom
    style="width: 500px; height: 500px; border:1px solid black;"
    :zoomEnabled="true"
    :controlIconsEnabled="true"
    :fit="false"
    :center="true"
  >
<svg width="100%"  :height="$route.name=='name'?850:350" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-200 200 3500 1000"  style="background-color:#16181d">
      <circle x="10" y="10" r="5" />
    </svg> </SvgPanZoom
  >`
</template>

<script>
import SvgPanZoom from "vue-svg-pan-zoom";

export default {
  components: { SvgPanZoom }
};
</script>