问题标签 [svgpanzoom]

我正在使用svg-pan-zoom在我的 svg 上加载添加放大和缩小功能。但是我的 svg 没有存储在文件中，它是通过 js 生成的。

我想添加一个 thumbnailViewer，根据他们的示例，他们将 svg 放在这样的嵌入标签中：

但是我的 svg 不是静态文件，我该如何解决？任何想法？谢谢。

http://ariutta.github.io/svg-pan-zoom/demo/thumbnailViewer.html

有没有一种简单的方法可以仅在按下鼠标中键时平移？默认行为是平移任何鼠标按钮被按下（或任何触摸）。

看起来很有希望，beforepan但您只能获得旧位置和新位置，而不知道是什么触发了平移。

我可能可以使用它来让它工作，customEventsHandler但对于一些简单的检查来说似乎需要做很多额外的工作。

我想在带有 d3 图表的布局中包含直升机视图（或小地图视图）。我正在使用ariutta 的 svg-pan-zoom，但缩略图视图的行为与预期不符。经过多次测试，我发现没有办法得到它。我真的很感激任何建议。

这里有 jsfiddle 与我所拥有的简化版本。为方便起见，删除了大部分代码并使用了 d3noob 树图。我们也使用dhtmlx，但是这部分也已经从这个 jsfiddle 中删除了（也许以后我们可以考虑包含它）：jsfiddle with our code

这就是我想要得到的： 在此处输入图像描述

为了在缩略图视图中显示图表，d3 图表被编码（base64）并用作缩略图视图的背景图像（也尝试作为 src）。

可能的原因：

• dhtmlx
• 动态 svg
• 编码（base64）svg

提前致谢！

这是代码的简化版本（不使用 dhtmlx）。

HTML 代码

主要 JS 代码（它需要 thumbnailViewer.js 和 svg-pan-zoom.js，但这里不包含）

CSS 代码

我正在使用 javascript 创建一个 svg 对象，绘制一个基本的谢尔宾斯基三角形，然后将 svg 对象设置为 svg-pan-zoom。当缩放超过阈值时，我尝试重新绘制下一级三角形，我可以在屏幕上看到它们，但它们对缩放或平移没有反应。

我目前正在尝试在绘制下一级三角形后将 svg-pan-zoom 重新应用于对象，但这似乎不起作用。

HTML 基本上是一个空的正文。

有问题的JS代码：

我在 Tabbing-Component 中嵌入了一个 SVG-Pan-Zoom 实例。当活动选项卡更改时，前一个选项卡将被隐藏display: none。切换回第一个选项卡（再次显示display: block）后，svgPanZoom 实例处于不可用状态。我真的不明白发生了什么。

我只能在 Google Chrome 中重现此行为。

我创建了一个示例来对此进行测试：http ://svgpan-example.bitballoon.com/

这是一个错误，还是我错过了什么？

首先，我不是在寻找完整的代码。我对如何分解这个项目的想法很感兴趣。我确实有一个概念，但随着我的进展它变得相当复杂，重新渲染部分作为它平移/缩放的主地图。所以我希望有人可能有一个不太复杂的聪明想法。

想象一张实际打印的城市地图。它有一个覆盖在城市特征上的区域网格，通常在顶部有字母字符 - A、B、C、D 等。沿边 1、2、3 垂直的数字......你明白了吗？

所以这是我的项目。地图本身应缩放和平移，而区域图例仍保留在地图视图的顶部和侧面。图例将随着地图的缩放级别缩放，但无论缩放级别如何，它们的文本都将保持固定大小。此外，图例将随着地图平移，但仅在它们各自的轴上，保持在顶部和侧面。

我已经开发了带有网格的基本地图，但显然图例会随着地图移动和缩放，因此有时它们最终会在边界之外看不见。

是否有返回缩放级别的函数？或者如何使用 onZoom 获得缩放级别？

当缩放级别达到某个级别时，我想在 SVG 上添加/隐藏某些元素。当缩放足够大时，一个元素将被另一个元素替换。

我想在显示 SVG 图像的网站上实现缩放功能。

我看到了这个库github.com/ariutta/svg-pan-zoom，它提供了我需要的确切功能，

但是我似乎无法让它与 angular2 一起使用，无法访问窗口。

经过一些研究，我想我必须将窗口填充到 svg-pan-zoom 的 webpack 导出中。也许我不是在寻找正确的东西，但我认为这是非常惊人的，有这么多的工作需要完成，只是为了导入一个 3rd 方 javascript。我能找到的最好的线索是：https ://github.com/ariutta/svg-pan-zoom/issues/207编辑：见答案。

我使用了这个 Angular 2 aspnet 核心启动项目： https ://damienbod.com/2017/01/01/building-production-ready-angular-apps-with-visual-studio-and-asp-net-core/

编辑：实际上是这个 https://github.com/MarkPieszak/aspnetcore-angular2-universal但是分支在我发布这篇文章时得到了更新，这让我感到困惑

---

我这里有这个服务，

svg-pan-zoom.service.ts

这里称为 map.component.ts

---

我的 app.module 中引用了 SvgPanZoomService 服务

我的 package.json 中引用了 Svg-pan-zoom 库，

最后，我的构建给了我 2 个 js 文件，main-client.js 和 vendor.js

我可以浏览 main-client.js 并看到它引用了 svg-pan-zoom，
当我的页面加载时它出现在我的浏览器源中

但是当谈到加载它应该做的事情的部分时，我得到了这个错误。

现在我读到我不打算从组件访问窗口，但我对 lib 调用的内容没有发言权，我在这里读到某处添加(isBrowser)应该验证我没有调用这个服务器端（为什么我希望服务器缩放这个你是对的吗？）

这是我的 webpack.config.js

该应用程序然后加载另一个 webpack.config.vendor.js

我还有 2 个与 webpack.config.js 相关的文件 boot-client 和 boot-server，它们是用于打包服务器和客户端文件的说明。

谢谢。

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

是否可以添加多个 svg 文件覆盖？缩放功能应在所有图像上完成。目标是构建具有动态内容的地图。

非常感谢你的帮助

克里斯托夫

请告诉我，有没有办法在按下重置时为 svg 设置一些填充？

lib 将其缩放到尽可能靠近边界的位置，我想让重置工作如屏幕右侧所示。