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

Question

我正在使用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

Answer 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