在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 安装,如果真执行这行语句,会需要很长时间,如果安装有问题,回滚的同时还会删除其他安装
·
在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>更多推荐



所有评论(0)