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

Question

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

1. 可以平移图像（移动以查看图像的不同部分） svg图像，光标）simmilar到谷歌地图。

2. SVG图像可以放大和缩小，也可以与谷歌相同 地图除了不需要加载新图像作为图像 是一个载体。

对于一个类似的脚本我已经看到使用普通图像格式的http://jibbering.com/routeplanner/

Answer 1

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

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

Answer 2

我将Andrea的SVGPan派生成了一个（希望）更友好的Raphäel plugin：）

Answer 3

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

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

Answer 4

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

Answer 5

我最终使用了从SVGPan派生的svg-pan-zoom，但允许放大/平移HTML中的任意svg元素，并且可以添加控件。

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