问题标签 [svgpanzoom]

当您使用 panzoom 库放大 SVG 时，谁能帮我添加动画？我已经看到了关于平移动画的解决方案，但是我想要一个缩放动画。请有人帮助...在此先感谢。

Svg 自动调整大小以填充它的列容器。完全加载 svgPanZoom 后，我以较小的图像结束：

如果我对容器应用高度，它会调整大小，在每一侧留下空白。

问题是当我再次放大和缩小时，图像不再居中：

我认为有两种方法可以解决这个问题： 1. 在 zoomOut 上重新定位图像。2. 使用 viewBox preserveAspect 使图像正确调整大小，而无需通过 CSS 应用大小。

对我来说，这两个有点令人困惑，经过几个小时的尝试，我无法让它发挥作用。这是我的代码：

HTML：

JS：

一开始我正在做：

我有一个 SVG，里面有很多元素。我还有一个弹出元素，它显示在元素点击上。当我缩放 SVG 时，不应缩放弹出窗口。如何防止此弹出窗口使用 SVG 进行缩放？

如此代码笔所示：

https://codepen.io/genworks/pen/EeJNMO?editors=1010

svgpanzoom 与缩放级别成比例地增加线条粗细，至少在使用默认选项时，例如当这样调用时：

有没有办法让它在缩放时保持原来的线条粗细？

我已经绘制了一个类似画笔和缩放的图表 ，当鼠标在 y 轴上并放大时，我想为 y 轴添加另一个缩放事件（目前仅放大 x 轴）

我添加了一些这样的代码：

如果我删除了问题d3.event.transform.rescaleY(yChart).domain()，当鼠标打开和放大/缩小时，y轴会改变，但图形不会改变。添加后，放大时可以，但无法缩小（只是卡住并且页面向下滚动）。我该如何解决这个问题，或者有更好的解决方案吗？

我正在使用 ariutta svg-pan-zoom 脚本。选项 fit 和 center 设置为 true。在我的 SVG 中有一个像这样的视图框定义：

svg 宽度和高度设置为屏幕尺寸。

这实际上是一个地理坐标边界。需要在地理坐标中以特定点为中心，例如：27.81 -43.221，然后在第 4 级缩放。据我所知，我必须为平移功能提供像素坐标。在我的情况下如何计算它们？

下面是一个完整的svg源

我想用 ID 居中并缩放到圆形区域：“marker”，为 zoom 和 panBy 方法提供适当的值。

更新 - 我创建了一个代码片段来说明我的问题

这是一个很棒的图书馆。它运作良好。感谢 Bumbu Alex 和 Anders Riutta 以及所有的贡献者。好吧，我被卡住了。我已经尝试了很多。我想答案就在附近。

当我通过滚轮或捏（无论如何）放大时，它可以很好地放大和缩小。当我放大 1 倍时，它会保持原位。

但是当我

1. 放大 2 次（例如）
2. 将鼠标光标移开（例如 1 英寸）
3. 一路缩小，我的元素都关闭了。所以没有什么中心了。它适用于平底锅。一半的元素被截断了视口。

所以这还不错。我想我用错了。我已经尝试了数千次来调整它的大小，但对我来说没有任何效果。我很感激任何帮助。谢谢你。

我正在尝试使用 svg-pan-zoom 库，当放大/缩小和鼠标拖动鼠标 x,y 位置出错时，想要更新它但不知道该怎么做。这就是我创建 svgPanZoom 的方式：

并想发送值来更新视图框，但不知道如何设置它。

我正在使用使用 create-react-app 创建的应用程序中的 react-svg-pan-zoom组件，只要我不构建，一切正常。当我执行时：

我看到一个空白页，这就是我在控制台日志中看到的：

当我生成最小化版本时，似乎发生了一些奇怪的事情。有没有人已经遇到过类似的问题？

如何将初始缩放值更改为最大缩小值？目前，我将其设置为接近中点。