Use to zoom in and zoom out and drag svg on the vue page

In the vue page, you can zoom in and out and drag the svg, using the vue-svg-pan-zoom component, the githbu address   https://github.com/yanick/vue-svg-pan-zoom

installation method:

        If it is not installed and the page is used again, the vue command line will prompt npm install --save vue-svg-pan-zoom to install. If this statement is executed, it will take a long time. If there is a problem with the installation, roll back At the same time, other installed components will be deleted, and then the cnpm i command must be executed to install, which is more troublesome.

      Execute   cnpm install vue-svg-pan-zoom   and it will be installed in a few seconds.

 

Calling method:

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