使用Panzoom控制svg

插件两个

1个是panzoom

timmywil/panzoom: A library for panning and zooming elements using CSS transforms (github.com)

1个是svg-sprite-loader

npm install svg-sprite-loader --save

安装参考该网页

使用svg-sprite-loader 遇到的问题_Shen_yuanjia的博客-CSDN博客

老规矩先上代码

<template>
  <div>
    <el-button @click="reset">Reset</el-button>
    <el-button id="zoomOutBtn">-</el-button>
    <input id="rangeInput" type="range" min="0" max="3" :value="scale" />
    <el-button id="zoomInBtn">+</el-button>

    <el-button @click="startWheel">Start wheel</el-button>
    <el-button @click="endWheel">End wheel</el-button>
    {{ "  scale " + scale + "  (" + x + " , " + y + ")" }}
    <svg width="100%" height="600" class="svgC">
      <!-- <rect
        x="100"
        y="100"
        width="100"
        height="50"
        fill="rgb(103, 205, 254)"
        stroke="black"
        stroke-width="1"
      /> -->
      <rect
        id="rotateEle"
        x="200"
        y="200"
        width="50"
        height="50"
        fill="rgb(103, 205, 254)"
        stroke="black"
        stroke-width="1"
      />
      <svg>
        <use id="panzoom-element" xlink:href="#icon-cola"></use>
      </svg>
      <!-- #icon-  为icon的前缀，XXX为icon名称 -->
      <!-- when use svg-icon, the svgPicture cannot be moved or other actions -->
      <!-- <svg-icon id="panzoom-element" icon-class='dog'></svg-icon> -->
    </svg>
  </div>
</template>

<script>
import Panzoom from "@panzoom/panzoom";

export default {
  data() {
    return {
      x: "",
      y: "",
      elem: null,
      panzoom: null,
      scale: "1.2",
    };
  },
  methods: {
    startWheel() {
      this.elem.parentElement.addEventListener(
        "wheel",
        this.panzoom.zoomWithWheel
      );
    },
    endWheel() {
      this.elem.parentElement.removeEventListener(
        "wheel",
        this.panzoom.zoomWithWheel
      );
    },
    reset() {
      this.panzoom.reset();
      // this.panzoom.zoom(1, { force: true });
      // same effect
    },
    panz() {
      this.elem = document.getElementById("panzoom-element");
      this.panzoom = Panzoom(this.elem, {
        maxScale: 3,
        minScale: 0,
      });
      // this.panzoom.pan(10, 10);
      this.panzoom.zoom(this.scale, { animate: true });

      let zoomIn = document.getElementById("zoomInBtn");
      let zoomOut = document.getElementById("zoomOutBtn");
      let rangeInput = document.getElementById("rangeInput");

      zoomIn.addEventListener("click", this.panzoom.zoomIn);
      zoomOut.addEventListener("click", this.panzoom.zoomOut);
      rangeInput.addEventListener("input", (event) => {
        // console.log("event.target", event.target);
        this.panzoom.zoom(event.target.valueAsNumber);
      });

      let rotateElem = document.getElementById("rotateEle");
      const panzoom = Panzoom(rotateElem, {
        setTransform: (_, { scale, x, y }) => {
          panzoom.setStyle(
            "transform",
            `rotate(${x / 20}deg) scale(${scale}) translate(${x}px, ${y}px)`
          );
        },
      });
    },
    // get Scale when it init
    getS() {
      if (this.panzoom) {
        this.elem.addEventListener("panzoomchange", (event) => {
          this.scale = event.detail.scale.toFixed(2); // => { x: 0, y: 0, scale: 1 }
          this.x = event.detail.x.toFixed(2);
          this.y = event.detail.y.toFixed(2);
        });
      }
    },
  },
  mounted() {
    this.panz();
    this.getS();
  },
};
</script>

<style>
.svgC {
  background-color: rgb(206, 223, 196);
}
</style>

演示图

有BUG

根据这个网页使用使用 iconfont 中的 svg 图标_未思-CSDN博客_iconfont svg

 在IconFont网页下载压缩包后，里面的Iconfont.js文件，直接引入

xlink:href后面填写的名称是icon图标的名字

不过这么用每次都要下载个压缩包，挺烦的，但不这么用老是有NaN报错，太痛苦了