SVG平移和缩放(鼠标滚轮)的实现

1.在HTML中嵌入SVG（我采用的是<embed>标签嵌入）

　　<div class="wrapper wrapper-content">
　　　　<embed id="svg" src="~/Content/test.svg" class="show-style" onload="zoom(this)"/>
　　</div>

2.引入JS文件（svg-pan-zoom.js在文末github里下载）

　　<script src="~/Content/js/svg-pan-zoom.js"></script>

3.加入js脚本

　　<script type="text/javascript">
　　　　function zoom(obj) {
　　　　　　// 此处获取的元素Id是SVG文件中的<g>标签的id值
　　　　$(obj.getSVGDocument().getElementById(‘svg‘)).show();
　　　　svgPanZoom(obj, {
　　　　　　zoomEnabled: true, //开启缩放功能
　　　　　　controlIconsEnabled: true //开启右下角缩放控件功能
　　　　　　});
　　　　}
　　</script>

主要参考来源https://github.com/ariutta/svg-pan-zoom里面包含多种SVG图布局以及显示方式的Demo

https://blog.csdn.net/SL_World/article/details/89106463