问题标签 [svgpanzoom]

我正在开发一个 React Native 项目。我们的后端返回一个指向远程 SVG 图像的 URL。我不仅需要显示 SVG，还需要在移动应用程序中平移和缩放它。

• 为了显示远程 SVG 图像，我使用react-native-svg库。
• 为了平移和缩放 SVG，我使用react-native-simple-svg-pan-zoom库。

这是我尝试过的：

运行我的应用程序时，会显示远程 SVG 图像，我可以根据配置放大和缩小。但是放大时，SVG 图像不清晰。它看起来更像是一个被缩放的位图。这是一个示例，当我放大到最大比例时（在上面的代码片段中你可以看到maxScale={10}）。

那么，如何缩放远程 SVG 图像？如果我使用的库不是一个好的选择，任何人都可以建议我使用其他库来解决我的问题吗？

==== 2021 年 2 月 2 日更新 ====

我按照@Minh Vo 的建议尝试了 react-native-image-zoom-viewer 。但是我得到空白屏幕，远程 svg 图像不是由库渲染的。

如果您觉得我应该为我的问题提供 SVG 的 URL，您可以以此为例https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg

根据帖子How to display scatter plot with R Packages:svgPanZoom? 我试图在 R Shiny 中复制一个可缩放的图。有人可以帮我写代码吗？为什么我不能重现此代码？

我想测试特定 SVG 元素的位置是在当前可见的平移缩放区域内部还是外部。如果它在外面，那么我可以平移以使其刚好在相应的边界内。

这听起来像是一个简单的操作，只是我找不到正确的测试来查看某个点是否在可见区域之外；如果我能做到这一点，那么我可以毫不费力地处理平底锅。

根据原始元素 x/y 属性，我拥有的位置是未转换的位置，因此我希望必须访问适当的 CTM，但我找不到这个。

我有 svg 渲染场地座位的地方。所有席位都按部门分组。我需要在座位点击事件上，放大该扇区中的那些座位，当我点击另一个扇区时，它应该缩小并再次放大新扇区。这是我想要的一个例子：https ://observablehq.com/@d3/zoom-to-bounding-box?collection=@d3/d3-zoom 。

目前我使用 svgPanZoom.js 库来操作 svg（我知道它使用矩阵而不是 viewBox）。D3 似乎有点难，你能告诉我一个 d3 的替代方案吗？我可以像上面的例子那样做吗？

这是我的代码：

我正在使用此代码https://github.com/bumbu/svg-pan-zoom创建交互式 SVG。

我想像下面的示例一样限制平移（仅在缩放的 SVG 大于其容器后让它平移，并且不要让它平移到 SVG 内部之外）。

示例：https ://codepen.io/PedrofpHenriques/pen/ExWVdKY

此代码具有预期的效果。但我无法保持 SVG 居中。任何平移或缩放操作都会导致 SVG 改变位置。

我在用着：

gutterWidth = panZoom.getSizes().width

gutterHeight = panZoom.getSizes().height

我一直在修补左右顶部，bottomLimit但无济于事。

任何帮助，将不胜感激。

所以我有一个使用 d3 创建的 Globe，并为它添加了缩放功能，您可以在其中使用鼠标放大和缩小，也可以使用鼠标拖动地球来移动。现在我有了地球上的平铺数据。我想以某种方式创建一个算法或函数，用户只需用鼠标在地球上单击特定数据点，它就会自动放大到单击的数据点。有人可以告诉我应该使用哪些缩放功能，例如 zoom.transform、transition、scale 或 scaleby？任何建议都会有所帮助。谢谢你。

我一直在对 svg 中生成的元素（有向图）应用缩放。原始代码使用 d3js v3 库，如下所示：

我试图重用有关缩放功能的代码..但无济于事。当我应用它时，它通常会“冻结”网络并且我无法与网络交互（独立移动节点），即所有元素作为一个整体移动。如何在不影响生成图形特征的情况下应用缩放？

我想使用我的 SVG 文件中的圆圈来触发以圆圈为中心的放大。我已经使用 div 作为缩放的触发器，但是如果我将 id="pin" 应用于 SVG 中的一个圆形元素，它就不再放大了。谁能告诉我这是为什么？

有没有更好的方法来实现我想要做的事情？理想情况下，我希望能够单击以缩放，然后在放大时访问 SVG 中的其他交互性。如果这不可能，是否有一种简单的方法来缩放和平移 SVG 并能够访问 SVG 交互性放大时？

如果我遗漏了一些明显的东西，请原谅我，我还在学习基础知识！

粗略示例： CodePen 链接

I'm using SVG-PAN-ZOOM library to handle a map in a webpage. It works very well for desktop.

For mobile devices I have followed this demo: https://bumbu.me/svg-pan-zoom/demo/mobile.html

But I have some troule, when the use try to scroll the page, the svg moves (pan).

Then I tought it whould be great to enable the pan with the double finger touch like the google maps does.

Is it possibile?

我有下面的闪亮应用程序，我想在其中平移和缩放 .svg。

我试过这个svgPanZoom包，但可以让它工作。这是如何运作的？还是另一种选择？