svg图片动态缩放功能(jquery.svg.pan.zoom)

要实现SVG图片的动态缩放功能，可以使用jQuery插件jquery.svg.pan.zoom。以下是一个简单的实现示例：

首先，确保你已经加载了jQuery库和jquery.svg.pan.zoom插件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-svg-pan-zoom@1.2.2/dist/jquery.svg.pan.zoom.min.js"></script>

然后，在HTML中添加SVG图片：

<svg id="mySVG" width="500" height="500">
  <!-- SVG内容 -->
</svg>

接着，使用jQuery初始化jquery.svg.pan.zoom插件：

$(function() {
  $('#mySVG').svgPanZoom({
    zoomEnabled: true,  // 允许缩放
    controlIconsEnabled: true,  // 显示缩放控制图标
    dblClickZoomEnabled: false,  // 禁用双击缩放
    fit: true,  // 自适应SVG容器大小
    center: true  // 居中SVG视图
  });
});

这段代码会使得ID为mySVG的SVG图片具备动态缩放的功能。用户可以通过鼠标滚轮或者触摸板的缩放手势来进行缩放，而且图片会自适应SVG容器的大小，并且始终保持居中。