svgjs，如何在绘制元素后移动视图区域？

Question

我有

var draw = SVG().addTo('#draw');

作为我的主要绘图位置，所有 svg 元素都位于其各自超出屏幕尺寸的位置。

现在我想要像 google 地图那样的拖动功能（其中呈现的元素保持在它们的位置，但用户的视图在我们拖动它时移动到不同的部分）。我可以处理鼠标事件等，但我 transform/move 究竟要做什么才能实现这种类型的拖动？

我可以跟踪鼠标移动并遍历所有存在的元素并移动它们。但我假设有一种聪明的方法可以做到这一点。理想情况下，我希望元素保持原样，但 "draw" 变量在我拖动时以某种方式在屏幕上显示其自身的不同部分。

我该怎么办？

Answer 1

这个效果是通过改变外部 svg 元素的 viewbox 属性来实现的。 svg.js 有一个插件可以做到这一点。你可以找到它here。您也可以通过 运行 npm:

简单地安装它

npm install @svgdotjs/svg.panzoom.js