如何在 svg-pan-zoom 中显示滚动条？

Question

我想知道如何在使用 svg-pan-zoom 进行缩放时启用滚动条。

我试过overflow: auto在外部 div 或 svg 标签上没有运气。

希望我能在这里得到一些帮助。

Answer 1

默认情况下，在svg-pan-zoom内部没有滚动条，因为它本质上是一个 SVG，而在 SVG 内部，它们的行为就像它们是overflow: hidden 。 您必须自己实现滚动条（渲染一些看起来像滚动条的元素，计算它们的大小和位置......）。

Answer 2

对于遇到问题的任何人，我想出的最佳解决方案（hack）是将容器 div 设置为溢出：自动，将 svg 元素的宽度和高度设置为容器 div 的宽度和高度，设置将 svg 元素的位置设置为绝对位置，然后在 svg 元素旁边放置第二个 div。 然后，您需要将第二个 div 的大小同步到 svg 的“真实”大小，您可以通过在 svg 元素上调用 getBBox() 以及通过缩放产生的任何缩放来获得该大小。 因此，第二个 div 强制包含 div 具有滚动条。 同样，您需要将平移事件与容器的滚动条同步，反之亦然。

当一切都说完了，平移和缩放通过与父 div 的滚动条同步的 svg 转换发生，并且对用户完全透明。