应用平移和缩放内联SVG

时间:2015-01-17 11:02:31

标签: html svg maps zoom panning

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

我们真的很想使用这个插件,但是所有内容都是在脚本中预定义的,我们真的不知道如何在内联SVG上做到这一点(或者有人可以帮助我们解释整个代码是如何工作的,也许可以教会如何让它适用于内联SVG,因为我们是纯粹的业余爱好者。)我已经找了很多插件,但它们似乎都不适合这种需要。

1 个答案:

答案 0 :(得分:0)

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

  

缩放主要涉及使元素更大/更小   根据你的缩放级别和平移涉及制作元素   相对于您的视口移动。

所以:

  • 在每个缩放级别上,遍历所有路径,然后 缩放 适当的系数。

  • 对于平移,您只需 翻译 (移动)您的SVG元素即可 方向相反的方向。

您可以查看以下内容,了解有关扩展/翻译SVG元素的更多信息:SVG transformations


另一方面,一些谷歌搜索(意思是弹出的第一个结果)转为this neat library,这看起来非常简单。