在vue页面用能放大缩小拖拽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>