限制SVG水平方向的缩放和平移

本文介绍如何使用 svg-pan-zoom 库来限制 SVG 元素在水平方向上的缩放和平移，使其只能在垂直方向上进行缩放和平移。通过 contain() 方法和动态设置 minZoom 属性，可以实现 SVG 在初始缩放级别时锁定水平方向的平移，同时允许垂直方向的自由移动，并在放大后恢复正常的平移行为。

使用 svg-pan-zoom 限制水平方向缩放和平移

svg-pan-zoom 是一个强大的 JavaScript 库，用于为 SVG 元素添加平移和缩放功能。在某些情况下，我们可能需要限制 SVG 的平移和缩放方向，例如，只允许垂直方向的移动，而禁止水平方向的移动。以下是如何使用 svg-pan-zoom 实现这一目标的步骤：

1. 初始化 svg-pan-zoom 实例

首先，确保你已经引入了 svg-pan-zoom 库，然后使用以下代码初始化一个 svg-pan-zoom 实例：

window.panZoom = svgPanZoom('#limit-svg', {   zoomEnabled: true,   controlIconsEnabled: true,   minZoom: 1,   maxZoom: 10,   beforePan: beforePan // 可选，自定义平移前的处理函数 });

在这个例子中，#limit-svg 是你的 SVG 元素的 ID。zoomEnabled 和 controlIconsEnabled 分别启用缩放功能和控制图标。minZoom 和 maxZoom 设置最小和最大缩放级别。 beforePan 允许你在每次平移前执行自定义逻辑。

2. 使用 contain() 方法

contain() 方法是实现限制平移的关键。它可以将 SVG 元素的内容限制在容器的边界内。通过调用 contain()，我们可以设置 SVG 在初始状态下（缩放级别为 1）溢出顶部和底部，同时固定左侧和右侧，从而禁止水平方向的平移。

window.panZoom.contain();

3. 动态设置 minZoom

为了确保在 contain() 方法生效后，缩放级别不会低于当前状态，我们需要将 minZoom 设置为当前的缩放级别。这可以防止用户缩小到 contain() 之前的状态，从而保持水平方向的平移限制。

window.panZoom.setMinZoom(window.panZoom.getZoom());

完整代码示例

将上述步骤整合在一起，以下是一个完整的示例：

window.panZoom = svgPanZoom('#limit-svg', {   zoomEnabled: true,   controlIconsEnabled: true,   minZoom: 1,   maxZoom: 10,   beforePan: beforePan // 可选，自定义平移前的处理函数 });  window.panZoom.contain(); window.panZoom.setMinZoom(window.panZoom.getZoom());

注意事项

• 确保在 SVG 元素和 svg-pan-zoom 库加载完成后执行上述代码。
• beforePan 函数可以用于在平移之前执行自定义逻辑，例如，根据当前缩放级别调整平移行为。
• 如果需要动态更新平移限制，可以重新调用 contain() 和 setMinZoom() 方法。

总结

通过结合 contain() 方法和动态设置 minZoom 属性，我们可以有效地限制 SVG 元素在水平方向上的缩放和平移，同时允许垂直方向的自由移动。这种方法在需要控制 SVG 元素的交互行为，并提供更精细的用户体验时非常有用。