效果
demo
- 基于svg viewbox属性居中进行放大缩小
- 基于svg viewbox属性进行平滑拖动
demo预览地址
https://zqy233.github.io/svg-zoom-drag-vue-demo/#/
demo完整代码地址
https://github.com/zqy233/svg-zoom-drag-vue-demo
已经发布为npm包,可以直接安装使用
npm i -s svg-zoom-drag-vue-directives
Vue2
import Vue from "vue";
import App from "./App.vue";
import { svgWheel, svgDrag } from "svg-zoom-drag-vue-directives";
svgWheel(Vue);
svgDrag(Vue);
new Vue({
render: (h) => h(App),
}).$mount("#app");
Vue3
import { createApp } from "vue";
import App from "./App.vue";
import { svgWheel, svgDrag } from "svg-zoom-drag-vue-directives";
const app = createApp(App);
svgWheel(app);
svgDrag(app);
app.mount("#app");
绑定两个命令到dom上
<template>
<div id="svg" v-html="svgString" v-svgWheel v-svgDrag></div>
</template>
<script setup lang="ts">
import { svgText } from "./svgText";
const svgString = ref("");
onMounted(() => {
svgString.value = svgText;
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
#svg {
width: 100%;
height: 100vh;
overflow: hidden;
}
svg {
width: 100% !important;
height: 100% !important;
user-select: none;
}
</style>
注意点
指令将绑定元素的第一个子元素当做 svg,所以请注意绑定的元素
const svgDom = el.firstChild as SVGSVGElement;
这样设计是为了搭配v-html
<div id="svg" v-html="svgString" v-svgWheel v-svgDrag></div>