vue项目里拖放svg图

1. 安装vue-svg-pan-zoom 组件

方式1、执行 npm install --save vue-svg-pan-zoom

方式2、执行 cnpm install vue-svg-pan-zoom

　　　　

　　 2.页面代码

<template>
    <div>
        <SvgPanZoom
          class=""
          style="width: 100%; height: 80vh"
          :zoomEnabled="true"
          :controlIconsEnabled="false"
          :fit="false"
          :center="false"
        >
      <svg
        id="streetlampSvg"
        data-name="图层 1"
        class="ludeng_1"
        style="
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        "
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 3051.39 1319.85"
      >
        .........//svg代码
       </svg>
        </SvgPanZoom>
    </div>
</template> 
       
import SvgPanZoom from "vue-svg-pan-zoom";

components: { SvgPanZoom }, //控件声明