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

【问题标题】：Zooming and panning svg images using raphael.js or some other js library [closed]使用 raphael.js 或其他一些 js 库缩放和平移 svg 图像 [关闭]
【发布时间】：2011-01-21 07:33:35
【问题描述】：

我需要一个小脚本，它可以在具有 2 个功能的框架内显示 SVG（矢量图像）；

图像可以平移（四处移动以查看图像的不同部分）带有光标的 svg 图像）类似于谷歌地图。
SVG 图像可以放大和缩小也类似于 google 除了不需要加载新图像作为图像之外的地图是一个向量。

对于我见过的适用于普通图像格式的类似脚本，请参阅http://jibbering.com/routeplanner/

【问题讨论】：

此外，此功能应适用于所有浏览器，包括 ie（不是 ie 6），无需下载和安装 svg 查看器插件。
没有IE版本支持SVG（没有插件），所以这个“小脚本”至少需要将SVG转换为VML。这是一项相当大的工作：SVG 规范长达 719 页！
@Chandan 你有一些有用的答案 - 建议你接受其中一个

标签： javascript svg raphael

【解决方案1】：

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

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

【讨论】：

这个库有文档吗？如果在网页上调用特定函数时有某种方法可以使其放大，那就太好了。

【解决方案2】：

如果有人仍然感兴趣：我刚刚为 Raphael 找到了 Pan and 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

【讨论】：

这个插件有文档或快速入门页面吗？
恐怕不行。示例文件夹中有 2 个示例。更多我认为你必须联系作者

【解决方案3】：

我已将 Andrea 的 SVGPan 派生为（希望）更友好的 Raphäel plugin :)

【讨论】：

嘿，你有插件吗？ github页面不再可用。
@VicSzpilman github.com/andrewseddon/raphael-zpd ?

【解决方案4】：

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

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

【讨论】：

两个链接现在都失效了。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：