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
