本文将指导您如何使用 svg-pan-zoom 库来限制 SVG 元素在水平方向上的缩放和移动，同时保持垂直方向上的缩放和移动能力。正如摘要中所述，我们将使用 contain() 方法和动态设置 minZoom 来实现这一目标。
问题背景
在使用 svg-pan-zoom 库时，有时我们需要限制 SVG 元素的缩放和移动行为。例如，我们可能希望在初始缩放级别（通常为 1）时，禁止水平方向的移动，但允许垂直方向的移动，以便用户可以查看更多的 SVG 内容。
解决方案
svg-pan-zoom 库提供了多种配置选项，可以控制 SVG 元素的缩放和移动行为。为了实现限制水平方向缩放的目标，我们需要使用 contain() 方法和动态设置 minZoom。
以下是具体的步骤：
-
初始化 svg-pan-zoom 实例：
首先，我们需要初始化 svg-pan-zoom 实例，并设置一些基本的配置选项。
window.panZoom = svgPanZoom('#limit-svg', { zoomEnabled: true, controlIconsEnabled: true, minZoom: 1, maxZoom: 10, // beforePan: beforePan // 如果需要，可以添加 beforePan 回调 });这段代码创建了一个 svgPanZoom 实例，并将其绑定到 ID 为 limit-svg 的 SVG 元素上。zoomEnabled 选项启用缩放功能，controlIconsEnabled 选项显示缩放控制图标，minZoom 和 maxZoom 选项分别设置最小和最大缩放级别。
-
使用 contain() 方法：
contain() 方法用于限制 SVG 元素在视口内的移动范围。它可以将 SVG 元素限制在视口内，或者允许其在某些方向上溢出。
window.panZoom.contain('inside'); // 或者 'outside'，根据需求选择contain(‘inside’) 会将SVG元素限制在视口内部，防止溢出。contain(‘outside’) 则允许SVG元素在视口外显示，但会限制平移，使得SVG元素的边缘始终可见。
-
动态设置 minZoom：
为了防止在初始缩放级别时水平方向的移动，我们需要动态设置 minZoom 为当前的缩放级别。
window.panZoom.setMinZoom(window.panZoom.getZoom());
这行代码将 minZoom 设置为当前的缩放级别。由于我们在初始化时将 minZoom 设置为 1，因此在初始状态下，minZoom 将保持为 1。
完整代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Limit Zoom Horizontally</title> <style> #limit-svg { width: 500px; height: 300px; border: 1px solid black; } </style> </head> <body> <svg id="limit-svg" width="500" height="300"> <rect width="100%" height="100%" fill="lightblue" /> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20"> SVG Content </text> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/svg-pan-zoom/3.6.1/svg-pan-zoom.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { window.panZoom = svgPanZoom('#limit-svg', { zoomEnabled: true, controlIconsEnabled: true, minZoom: 1, maxZoom: 10, }); window.panZoom.contain(); window.panZoom.setMinZoom(window.panZoom.getZoom()); }); </script> </body> </html>
注意事项
- 确保在 DOMContentLoaded 事件触发后初始化 svg-pan-zoom 实例，以确保 SVG 元素已加载。
- contain() 方法和 setMinZoom() 方法的顺序很重要。先调用 contain() 方法，然后再设置 minZoom。
- 根据实际需求调整 contain() 方法的参数。
总结
通过使用 contain() 方法和动态设置 minZoom，我们可以有效地限制 SVG 元素在水平方向上的缩放和移动，同时保持垂直方向上的缩放和移动能力。这种方法可以应用于各种场景，例如地图浏览、图表展示等，以提供更好的用户体验。这个方案的核心在于先使用contain()来约束视图，然后将最小缩放级别设置为当前级别，从而防止用户在水平方向上进行过度平移。
