Question

我有

var draw = SVG（）。addTo（'＃draw'）;

作为我的主要绘图位置，在屏幕尺寸之外的各个位置填充了所有svg元素。

现在，我想像在谷歌地图中那样具有拖动功能（渲染的元素保持在其位置，但随着我们对其进行拖动，用户的视图会移动到不同的部分）。我可以处理鼠标事件等，但是究竟该如何转换/移动以实现这种拖动呢？

我可以跟踪鼠标的移动并遍历存在的所有元素并进行移动。但是我认为这样做有一种聪明的方法。理想情况下，我希望元素保留在原处，但是当拖动时，“ draw”变量以某种方式在屏幕上显示其自身的不同部分。

我该怎么办？

Answer 1

此效果是通过更改外部svg元素的viewbox属性来实现的。有一个可用于svg.js的插件，可以做到这一点。您可以找到它here。您也可以通过运行npm来简单地安装它：

npm install @svgdotjs/svg.panzoom.js