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

Question

我需要一个小脚本，能够在框架中显示SVG（矢量图像），具有以下两个功能：

1. 图像可以通过光标拖动进行平移，以查看SVG图片的不同部分，类似于谷歌地图。

2. 可以缩放SVG图像，与谷歌地图类似，但由于该图像是矢量图像，因此无需加载新的图像。

对于类似的脚本，我已经看到过适用于常规图像格式的网站，请参见http://jibbering.com/routeplanner/。

- Chandan Jog

---

此功能应在所有浏览器上正常工作，包括ie（不包括ie 6），无需下载和安装svg查看器插件。 - Chandan Jog

没有任何版本的IE支持SVG（无需插件），因此这个“小脚本”至少需要将SVG转换为VML。这已经是一个相当大的工作了：SVG规范长达719页！ - Ken

@Chandan 你已经得到了一些有用的答案 - 建议你接受其中一个。 - peter.murray.rust

Answer 1

Raphael很好，但还不够好。

请查看此页面：http://code.google.com/p/svgpan/。它正是您所要求的功能。

- Washa Wu

---

这个库有文档吗？如果在网页上调用特定函数时能够放大它，那就太好了。 - Anderson Green

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

- Daniel Alder

---

这个插件有文档或快速入门页面吗？ - Yahya KACEM

很抱歉，没有了。在示例文件夹中有两个示例。如果需要更多，请联系作者。 - Daniel Alder

Answer 3

我已经将Andrea的SVGPan改进成一个（希望）更友好的Raphäel插件 :)

- Daniel Assange

---

嘿，你能把插件放在其他地方吗？Github页面已经失效了。 - Vic Goldfeld

@VicSzpilman https://github.com/andrewseddon/raphael-zpd ？ - Nitrodist

Answer 4

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

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

- Chasbeen

---

两个链接现在都失效了。 - user166390

Answer 5

您可以尝试从IE9测试页面http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml运行脚本。需要对ID进行一些微调，但对我来说效果很好。

- Spadar Shut

Answer 6

我最终使用svg-pan-zoom，该程序源自SVGPan，但允许在HTML中缩放/平移任意的svg元素，并且可以添加控件。

如果整个页面仅加载SVG（例如老虎例子），则SVGPan非常有效，但如果您的SVG在HTML中的某个深层结构中，则不适用。

- nathanvda