svg缩放问题

第一次接触svg，一边学一遍画，寸步难行，写完之后发现无法缩放，超出范围就直接不显示了，很难受，在网上找了很久，结合自己的方法，得出解决方法，亲测有效

1. 先安装库 （两种）

npm install --save svg-pan-zoom

cnpm install  vue-svg-pan-zoom

 

2. 在所需页面引入库

import svgPanZoom from 'svg-pan-zoom'

3. 进行配置

mounted() {
			var panZoomTiger = svgPanZoom('svg', {
				zoomEnabled: true,
				controlIconsEnabled: false,
				fit: true,
				center: true
			});
		},

中间的svg，是我svg图形的id，用来获取节点

4. 完整代码(js部分)

<script>
	import svgPanZoom from 'svg-pan-zoom'
	export default {
		data() {
			return {

			}
		},

		mounted() {
			var panZoomTiger = svgPanZoom('svg', {
				zoomEnabled: true,//开启缩放
				controlIconsEnabled: false,//是否展示右下角缩放控件
				fit: true,
				center: true
			});
		},
		methods: {

		}
	}
</script>