问题标签 [svgpanzoom]

首先，感谢开发并帮助维护 svg-pan-zoom 的人。这真的很有帮助。大道具:)

无论如何，我有一个关于 svg-pan-zoom 社区的快速问题。是否可以在其中包含 HTML div 的 svg 上使用 svg-pan-zoom （将在 foreignObject 中）？

我需要一个 HTML 元素（特别是表单）来“跟随”这个 svg 在平移和缩放时的移动。它相对于 svg 元素的位置不应该改变，它必须与它们一起移动。

我已经尝试过完全分开（单独的代码来控制 HTML 表单的平移），但它非常花哨，而且我遇到了一些我不想处理的技术问题。（例如，移动 div 不会移动 svg。）如果有人能告诉我 svg-pan-zoom 是否支持 foreignObjects，以及如何使用 svg 移动 HTML 元素，我将不胜感激。

提前致谢。

我是 SVG 新手。我有一个 svg 图像，我已经为<g>标签应用了一个变换矩阵。现在我想计算<g>标签的宽度和高度。在页面加载时，我可以使用 getBBox() 或 getBoundingClientRec() 函数计算宽度和高度。但是当我调整窗口大小时，我正在更改矩阵值，在更新矩阵值之前，我如何计算<g>标签的宽度和高度。

-- getBBox() 和 getBoundingClientRec() 根据矩阵值返回宽度和高度。

示例：在页面加载时：

调整窗口大小时，我正在调用一个计算矩阵值的方法。 注意：矩阵值的计算尚未更新 我需要在调整大小时将图像居中到浏览器窗口。我减去窗口宽度和图像宽度除以 2，并将该值应用于矩阵。即，“x”值。示例：新矩阵值为 [1.2,0,0,1.2,x,10]

对于居中地图，我需要通过使用计算出的矩阵值来了解宽度和高度，<g>即 [1.2,0,0,1.2,x,10]

我怎么能启用鼠标滚动。我在我的项目中使用了一个名为CircleSlider.js（您可以在此处阅读更多信息）和jquery.panzoom-1.7.0.

所以，我做了一个半圆形，我可以通过移动按钮放大（+）和缩小（-）（请看一下随附的图片，以便您更好地理解我的意思 -图片）。

到目前为止，一切正常。我想做的是启用鼠标滚动，这样我就可以使用鼠标在图片内部放大和缩小。

这是我的html代码：

这是我circleSlider.js为了完全满足我的需要而修改的：

我希望我清楚地描述了一切。期待得到您的帮助。

这在文档中并不明显（如果您可以调用README.md文档；）），但是svg-pan-zoom库可能（仅）支持垂直/水平拟合，但如何？最佳拟合已经通过fit方法得到支持并且工作正常。

调用的方法contain可能是要使用的方法，但是当我调用它时，它有时会做一个，有时会做另一个。

我知道我可以自己做这件事和/或为这个漂亮的 OSS 做贡献，只是检查支持是否已经存在。

问题：

我想绑定 SVG 的平移，以便在未应用缩放时无法平移，但是当您放大时，您可以在 SVG 的范围内平移。

视觉示例：在下图中，中心的缩放视口可以平移到 SVG 的边缘，但不能再平移。

然而，这与给出的pan 示例非常不同，我无法研究如何改变它的行为。你会怎么做？（我也错过了一种简单的内置方式来做到这一点）？

我在尝试解决这个问题时遇到的问题

1. 每个限制都以像素为单位设置允许在正确方向上的移动。即 bottomLimit = 200 允许您向上移动 200 像素。因此，在默认缩放时，我需要将所有限制设置为 0，但是我无法弄清楚如何识别默认缩放，因为 realZoom 会根据浏览器窗口大小而变化。
2. 在视觉示例中，如果我们想设置 bottomLimit 以正确绑定 SVG，它需要等于 x，但我不知道如何计算 x。（topLimit 需要等于 y 等）

我使用 svg-pan-zoom 库 ( https://github.com/ariutta/svg-pan-zoom )，它在我网站上的页面上大约 75% 的时间都有效（在 Chrome 和 Firefox 中，最新版本）。

因为我假设这是由于我的一些错误配置，我想知道我是否犯了错误，或者是否有特定的场景可能导致这种情况。

我的代码：

错误：

库版本：3.2.9

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

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

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

但是它不起作用。svg 显然移到了视图框之外。看起来 panzoom 作为初始 x,y = 0,0 并且它的 viewbox 是 0 0 900 787

我正在使用 ariutta svg-pan-zoom 库。我有一个 SVG 文件，其中viewBox="0 0 1052.3622 744.09448" div 容器带有width=649和heigth=525,59。我试图在我的 SVG 中获取光标位置。

我的代码：

它工作正常，直到zoom等于 1（默认缩放级别）。当缩放大于 1 时，该y值是错误的（x很好）。例如：

1. 我点击某个点，结果是x: 197.82463543913713, y: 616.3652582594272
2. 使用鼠标滚轮缩放（zoom: 3.9562617313728334，光标仍位于屏幕上的同一点）。
3. 再次点击，结果是x: 197.82463192575807, y: 540.7407139122004

我一直在尝试许多代码组合，但没有任何效果。我不知道该怎么做。我错过了一些明显的东西吗？有没有更好的解决方案来获取光标位置？

我目前正在使用令人惊叹的包 svgPanZoom 开发一个闪亮的应用程序，我有两个问题仍未解决：

(1)是否可以动态自定义图形的大小。我尝试按照代码执行此操作（如https://stackoverflow.com/questions/33522860/svgplot-error-in-shiny）：

但什么也没发生:(你有什么想法吗？

(2)你知道是否可以在此代码中包含定位器（如在 PlotOutput 中）

主要思想是在正交系统中绘制（细胞）图片，然后用户单击图片以定位细胞核。有时图片上的单元格非常小，因此用户可能需要缩放（这就是我使用 svgPanZoom 的原因）。因此，即使用户使用缩放，我想得到的 X 和 Y 也是整个正交归一化系统中的那些

我使用 svg-pan-zoom 缩放后查看了光标位置，但它似乎不是来自 R

非常感谢您的想法！

有一个愉快的星期天晚上！

查

这些示例看起来非常适合内联 SVG 的平移/缩放：

https://github.com/ariutta/svg-pan-zoom

我试图弄清楚如何仅在水平方向缩放内联 SVG，同时保持垂直轴静止。