基于鼠标点击和滑轮事件的任意缩放和平移HTML中
一、SVG特点简述SVG概述：
SVG是可缩放矢量图形(Scalable Vector Graphics)，它基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。
百度上有SVG的一大堆介绍，这里就不细细说明，仅摘出重点，SVG主要特点是：
不失真——因为是矢量图 支持任意缩放——可用于地图存储 存储介质是XML——所以内部信息可被修改(如Notepad++) 二、SVG嵌入HTML页面的常用方式SVG嵌入HTML的方式有很多种，以下仅介绍两种方式，因为只有这两种方式目前支持svg-pan-zoom开源库，欲了解其余方式请见底部参考文献[6]。
①使用<embed>标签嵌入
<body>
...
<embed src="name.svg" class="..." >
...
</body>
②使用<object>标签嵌入
<body> ... <object data="name.svg" class="..." ></object> ... </body> 三、HTML中SVG的任意缩放和平移实现
此处使用GitHub中的一个js开源库svg-pan-zoom library，使用其中的svg-pan-zoom.js文件（对于该库的详细使用方法请见底部参考文献[1]）。
<head> ... <script src="jquery.js" type="text/javascript"></script> <script src="svg-pan-zoom.js"></script> ... </head> ②在HTML中嵌入SVG
<body> ... <object data="bada.svg" class="show-style" onload="zoom(this)"></object> ... </body> ③加入js脚本
<body> ... <script type="text/javascript"> function zoom(obj) { // 此处获取的元素Id是SVG文件中的<g>标签的id值 $(obj.getSVGDocument().getElementById('Logo')).show(); svgPanZoom(obj, { zoomEnabled: true, //开启缩放功能 controlIconsEnabled: true //开启右下角缩放控件功能 }); } $('object').attr('onload', 'zoom(this)'); </script> ... </body>
其中getElementById('Logo')获取的元素Id是SVG文件中的标签的id值Logo。
鼠标滑轮缩放效果如下，平移则使用鼠标拖拽即可。另外，设置了controlIconsEnabled: true则会显示如下图右下角的RESET控件组，可点击进行缩放和还原，无需专门编写该功能：
svg-pan-zoom.js源码的参数修改
在js文件约501行有如下默认配置选项参数，可通过修改参数实现自定义效果：
var optionsDefaults = { viewportSelector: '.svg-pan-zoom_viewport' // Viewport selector. Can be querySelector string or SVGElement , panEnabled: true // enable or disable panning (default enabled) , controlIconsEnabled: false // insert icons to give user an option in addition to mouse events to control pan/zoom (default disabled) , zoomEnabled: true // enable or disable zooming (default enabled) , dblClickZoomEnabled: true // enable or disable zooming by double clicking (default enabled) , mouseWheelZoomEnabled: true // enable or disable zooming by mouse wheel (default enabled) , preventMouseEventsDefault: true // enable or disable preventDefault for mouse events , zoomScaleSensitivity: 0.3 // Zoom sensitivity , minZoom: 1 // Minimum Zoom level , maxZoom: 60 // Maximum Zoom level , fit: true // enable or disable viewport fit in SVG (default true) , contain: false // enable or disable viewport contain the svg (default false) , center: true // enable or disable viewport centering in SVG (default true) , refreshRate: 'auto' // Maximum number of frames per second (altering SVG's viewport) , beforeZoom: null , onZoom: null , beforePan: null , onPan: null , customEventsHandler: null , eventsListenerElement: null , onUpdatedCTM: null }
其中最主要的就是如下三个参数，分别表示缩放灵敏度和最小/大缩放水平：
zoomScaleSensitivity: 0.3 // 缩放灵敏度[0,1],越大缩放越快 minZoom: 0.5 // 最小缩放水平 maxZoom: 60 // 最大缩放水平
【参考文献】：
[1] GitHub.svg-pan-zoom library.
[2] Microsoft-Doc.How to Zoom and Pan with SVG.
[3] 理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio.
[4] 做一个具有异步加载特性的echarts-vue组件(懒加载).
[5] echarts关系图异步加载数据.
[6] 菜鸟教程.SVG在HTML页面.
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
