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在文末gith

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

　　<div >
　　　　<embed ID="svg" src="~/Content/test.svg" 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

总结

以上是内存溢出为你收集整理的SVG平移和缩放(鼠标滚轮)的实现全部内容，希望文章能够帮你解决SVG平移和缩放(鼠标滚轮)的实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。