无法使用 panzoom 放大 SVG 中缩放坐标中的某个点

Cannot zoom in a certain point in scaled coords in SVG with panzoom

我正在使用 https://github.com/ariutta/svg-pan-zoom 库

我有一个 svg，里面有一个元素 "g"。这个元素有一个 viewBox = "2727 -2840 1630 1115"

我想放大一个特定点（在视图框内）

panzoom.zoomAtPoint(2, {x: 3000, y: -2500});

然而它不起作用。 svg 显然被移出了视图框。看起来 panzoom 以 x,y = 0,0 为初始值，其视框为 0 0 900 787

zoomAtPoint 正在放大渲染的 SVG 点。例如，如果您的原始 SVG 视口为 1000 x 1000，但页面上的 SVG 元素大小为 400 x 400（并且 fit 选项已启用），则：

  • 缩放到 {x: 200, y: 200} 将缩放到中心
  • 缩放到 {x: 500, y: 500} 将缩放到 SVG 之外（因为它目前只有 400 x 400）

这样做是为了方便使用鼠标进行缩放。如果您需要放大特定点，请查看 and at https://github.com/ariutta/svg-pan-zoom/issues/183