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

SVG平移和缩放(鼠标滚轮)的实现,第1张

概述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平移和缩放(鼠标滚轮)的实现所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1038416.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存