在内联 SVG 上应用平移和缩放

Question

所以我们有了这个重大项目，我们的目标是通过使用内联 SVG 创建一个简单的寻路系统，该系统包括缩放和平移功能，旨在部署在触摸屏单元上。我们想创建类似谷歌地图或类似的东西：http://bl.ocks.org/mbostock/3892919

我们真的很想使用这个插件，但是脚本中的所有内容都是预定义的，我们真的不知道如何在内联 SVG 上执行此操作（或者也许有人帮助我们解释整个代码是如何工作的，也许会教如何制作它在内联 SVG 上工作，因为我们是纯粹的业余爱好者。）。我找了很多插件，但似乎都不能满足需求。

Answer 1

如有疑问，只需缩放/移动所有内容。

缩放本质上涉及使元素变大/变小 根据您的缩放级别和平移涉及制作元素 相对于您的视口移动。

所以：

• 在每个缩放级别上，遍历所有路径并按 缩放 适当的系数。

• 对于平移，您只需翻译（移动）您的 SVG 元素到 相反您正在平移的方向。

您可以通过查看以下内容了解有关缩放/翻译 SVG 元素的更多信息：SVG transformations

---

另一方面，一些谷歌搜索（意思是弹出的第一个结果）变成this neat library，这对于您的目的来说看起来很简单。