基于点击和滑轮事件的任意缩放和平移HTML中SVG解决方案

最新推荐文章于 2024-05-11 10:57:12 发布

置顶 SL_World

最新推荐文章于 2024-05-11 10:57:12 发布

阅读量3.7k

点赞数 3

分类专栏：前端文章标签： svg 缩放平移 html pan zoom

本文链接：https://blog.csdn.net/SL_World/article/details/89106463

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

SVG概述：SVG是可缩放矢量图形(Scalable Vector Graphics)，它基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。

Tips

欲看以下完整代码、js文件和svg文件，请移步我的GitHub。

一、SVG特点简述

百度上有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]）。

①引入js文件

<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页面.

SL_World

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
13
评论
基于点击和滑轮事件的任意缩放和平移HTML中SVG解决方案

SVG概述：SVG是可缩放矢量图形(Scalable Vector Graphics)，它基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。Tips欲看以下完整代码、js文件和svg文件，请移步我的GitHub。一、SVG特点简述百度上有SVG的一大堆介绍，这里就不细细说明，仅摘出重点，SVG主要特点是：不失真——因为是矢量图支持任意缩放——可用于地图存储存储介...
复制链接

扫一扫