问题标签 [svgpanzoom]

使用 svg-pan-zoom 实用程序，我想在每次更改时注册缩放和平移值（使用onPan()and onZoom()）并使用这些保存的值将我的 SVG 平移和缩放到相同的位置（使用pan()and zoom()）。

如果缩放级别未更改，我可以正常工作，但是，如果缩放级别更改，我在 svg 的所需位置和真实位置之间存在差距。

你可以在那个小提琴中看到这个问题：首先，放大，然后按下平移按钮。我希望我的 svg 保持其当前位置。

我在 stackoverflow 上阅读了其他关于类似情况的帖子（我想我应该使用来自 的数据getSizes()），但我仍然无法使其工作。

有什么建议吗？

这是实际拥有的东西。 https://jsfiddle.net/Lofdujwr/

我正在使用一个库来缩放和平移 SVG svgpanzoom。例如，我有一个按钮，点击它会放大西班牙，所以我把坐标放在：

问题是当我调整坐标不再起作用的页面时，我需要重新计算它们，我找到了一个可能有效但我不知道如何使用它的函数：

职能岗位

还有一个问题，例如，是否可以从 svg 中的路径 ID 获取坐标？

编辑：似乎我必须从我的 svg 计算实际的 X 和 Y 视口，然后重新计算它在 0.0 视口上给出我的观点（x：188，y：185），有人知道我能看到的任何例子吗？

我有一个 svg 元素；节点，链接，标签等附加到它。我运行了按名称缩放到特定节点的功能，但问题是在自动缩放到相应节点后，每当我尝试平移 svg（通过单击并拖动它）时，它都会重置缩放和坐标在我放大到特定节点之前的状态。我认为这与 d3.event.transform 的工作方式有关，但我无法修复它。我希望能够在不重置任何值的情况下继续从我缩放到的节点进行平移和缩放。

（另外，通过一些调试，我观察到节点的 cx 和 cy 坐标并没有通过代码的缩放和平移而改变，但是如果我要手动缩放和平移到节点，那么它会。我猜那就是问题所在）

我正在使用 svg-pan-zoom 库，我需要平移/缩放视图以适应特定元素。我可以使用 fit 方法，但它适合整个内容，在这种情况下，我只需要适合一个特定元素。另一种选择是计算所需的平移和缩放并使用自定义控件，但如何让元素的平移/缩放适合窗口？

更新

我试图遵循@bumbu“更简单”的解决方案。这是我的第一个想法，但我遇到了缩放点位置的一些问题。

这是显示预期行为和计算尝试的小提琴。

http://jsfiddle.net/mgv5fuyw/2/

这是计算：

但不知何故，预期的缩放中心（225,225）不是正确的。

在 Angular 9 中，我在我的 pdf 查看器中实现了鼠标滚动缩放。但是当我滚动时，它总是滚动到左上角。我希望它滚动鼠标指向的位置。请先看下图。在缩放时，垂直和水平滚动条分别粘在顶部和左侧。

我有以下代码。

我在 SVG 中有两个圆圈。SVG 是可拖动的（使用 angular9 和材质），并且可以通过更改比例对其进行缩放。在正常缩放 (100%) 中，圆圈被拖动到 SVG 中非常好，但是当在 SVG 上设置新比例（例如 1.5）时，圆圈被拖动 异常如下图所示：

拖动不在鼠标位置！

和正常缩放的图像 (100%)

我该如何解决这个问题？

所以我使用 svg-pan-zoom 来显示一个动态加载的 SVG 元素。加载元素的代码与此处的示例类似：https ://ariutta.github.io/svg-pan-zoom/demo/dynamic-load.html （要了解我的意思，请查看源代码）。

我想要做的是在 SVG 文档中搜索与特定查询匹配的文本标签。我在这里找到了一个示例，这似乎是该部分的解决方案，但我找不到任何关于如何访问 svg-pan-zoom 中的 SVG 内容的信息。

恐怕我没有任何代码......我已经试错了很长一段时间了。基本上我只是想弄清楚如何访问 SVG 内容以便我可以搜索它。

谢谢！

我是 d3js 的新手，正在尝试实现缩放和平移到特定图层。在缩放平面图（附加图像）时，标记大小也会相应变化。理想情况下，标记应根据平移或缩放级别以固定大小改变位置。我正在使用下面提到的代码。任何帮助表示赞赏。

缩放前

缩放后，标记应该改变位置而不是大小

平面图

标记

我正在使用 pan-zoom 库来缩放 SVG 元素。当我尝试在缩放后添加新路径时，它根据旧坐标显示不正确。这是代码 - JSFIDDLE。因为新元素未放置在 pan-zoom HTML 标记中，可能会出现此问题。如何添加新对象以将其放置在正确的平移缩放坐标处？

如何添加新对象以将其放置在正确的平移缩放坐标处？

我有一堆多边形位于 svg-pan-zoom 组中，它们以下列方式覆盖在图像上：

当我将其 w/h 分别设置为 100% 时，图像会在调整大小时扩散以填充容器。但是，当我调整页面大小时，我的多边形没有缩放到图像上的适当位置，也许我应该重新考虑如何设置图像的宽度和高度？我正在使用 svg.js 进行操作。有什么方法可以轻松纠正窗口调整大小时多边形点的位置？我也在使用 svg-pan-zoom.js，并按照演示中的规定添加了相应的侦听器：