使用raphael.js或其他一些js库缩放和平移svg图像[关闭]

Question

我需要一个小脚本，它将在一个具有2个功能的帧中显示SVG（矢量图像）;

1. 可以平移图像（使用光标移动以查看svg图像的不同部分）与谷歌地图相似。

2. SVG图像也可以放大和缩小到谷歌地图，除了不需要加载新图像，因为图像是矢量。

对于一个类似的脚本，我已经看到与普通图像格式一起工作请参见http://jibbering.com/routeplanner/

Answer 1

拉斐尔很好，但还不够好。

查看此页面： http ： //code.google.com/p/svgpan/ 。 它完全符合您的要求。

Answer 2

如果有人仍然感兴趣：我刚刚为Raphael找到了Pan和Zoom的实现。 还是一个非常年轻的项目，但我认为有趣的是：

https://github.com/escobar5/raphael-pan-zoom

在线演示： http ： //htmlpreview.github.com/？https : //raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

Answer 3

我已将Andrea的SVGPan导入（希望）更友好的Raphäel插件 :)

Answer 4

首先，您需要学习如何安装扩展Raphael以支持缩放的功能... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

接下来你要实现Wout的缩放插件...... http://github.com/wout/raphael-zoom

Answer 5

您可以从IE9测试页面尝试脚本http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml需要使用ID进行一些调整，但对我来说工作正常。

Answer 6

我最终使用了从SVGPan派生的svg-pan-zoom ，但允许在HTML中对任意svg元素进行zoomin / panning，并且可以添加控件。

如果您的完整页面只是一个加载的SVG（如老虎示例），SVGPan的效果很好，但如果您的svg位于html的某个更深处，则不行。