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

【问题标题】：Cannot zoom in a certain point in scaled coords in SVG with panzoom无法使用 panzoom 放大 SVG 中缩放坐标中的某个点
【发布时间】：2016-07-07 15:37:29
【问题描述】：

我正在使用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 并且它的 viewbox 是 0 0 900 787

【问题讨论】：

标签： svg zooming svgpanzoom

【解决方案1】：

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

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

这样做是为了轻松处理鼠标缩放。如果您需要放大特定点，请查看https://stackoverflow.com/a/33682381/1194327 和https://github.com/ariutta/svg-pan-zoom/issues/183

【讨论】：

嗨，我们想要一个函数来缩放 svg 元素的坐标而不是屏幕的某个点。您的缩放功能无法使用，它们的行为无法理解，而且它们通常什么都不做。