将可缩放和可移动的 SVG 裁剪为 div 中可见的内容

Question

我构建了一个 ASP.NET MVC 应用程序，在用户选择特定的建筑物和楼层后，它将在 SVG 中呈现平面图。使用Timmywil 的 panzoom 库，我为用户添加了移动平面图并放大或缩小的功能。平面图最初渲染在屏幕中央，并调整缩放比例，以便整个平面图可见。

通过按钮，用户可以将平面图保存为 PDF 格式。单击此按钮后，内部包含路径的 SVG 标签将用作转换的输入。但是，由于视图框和坐标仍然相同，因此仅保存初始情况。我使用 Timmywil 的示例来演示我的问题。下面是初始情况。因此平面图（在本例中是狮子）很好地居中并且在 div（黑色边框框）内部完全可见：

在平面图非常大并且用户只想保存某一部分的情况下（图 2 和 3），它应该“裁剪”SVG，但我在查找数字和进行计算时遇到困难为了达成这个。我想这必须通过更改视图框值来完成。

有人可以帮我吗？