Javascript 使用 raphael.js 或其他一些 js 库缩放和平移 svg 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2339374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zooming and panning svg images using raphael.js or some other js library
提问by Chandan Jog
I am in need of a small script that will display an SVG (vector image) within a frame that has 2 functions;
我需要一个小脚本，可以在具有 2 个功能的框架内显示 SVG（矢量图像）；
The image can be panned (moved around to look at different parts of the svg image with the cursor) simmilar to google maps.
The SVG image can be zoomed in and out on also simmilar to google maps except there will be no need to load new imagery as the image is a vector.
图像可以平移（移动以使用光标查看 svg 图像的不同部分）类似于谷歌地图。
SVG 图像可以像谷歌地图一样放大和缩小，除了不需要加载新图像，因为图像是矢量。
For a simmilar script i have seen that works with normal image formats see http://jibbering.com/routeplanner/
对于类似的脚本，我已经看到可以使用普通图像格式，请参阅http://jibbering.com/routeplanner/
采纳答案by Daniel Alder
If someone is still interested: I just found this implementation of Pan and Zoom for Raphael. Still a very young project, but interesting enough I think:
如果有人仍然感兴趣：我刚刚为 Raphael 找到了这个平移和缩放的实现。仍然是一个非常年轻的项目，但我认为足够有趣：
https://github.com/escobar5/raphael-pan-zoom
https://github.com/escobar5/raphael-pan-zoom
Online demo here: http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html
在线演示在这里：http: //htmlpreview.github.com/?https: //raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html
回答by Washa Wu
Raphael is good, but not good enough.
拉斐尔很好，但还不够好。
Check out this page: http://code.google.com/p/svgpan/. It does exactly what you asked for.
查看此页面：http: //code.google.com/p/svgpan/。它完全符合您的要求。
回答by Daniel Assange
I've derived Andrea's SVGPan into a (hopefully) more friendly Raph?el plugin:)
我已经将 Andrea 的 SVGPan 导出为（希望）更友好的Raph?el 插件:)
回答by Chasbeen
First you need to learn how to install a function that extends Raphael to support zooming... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas
首先你需要学习如何安装一个扩展Raphael来支持缩放的函数... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas
Next you want to implement Wout's zooming plugin... http://github.com/wout/raphael-zoom
接下来要实现Wout的缩放插件... http://github.com/wout/raphael-zoom
回答by Spadar Shut
You can try the scripts from IE9 test page http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtmlRequires a little tweaking with ids but worked fine for me.
您可以尝试来自 IE9 测试页面的脚本http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml需要对 id 进行一些调整，但对我来说效果很好。
回答by nathanvda
I ended up using the svg-pan-zoomwhich is derived from SVGPan, but allows zoomin/panning of an arbitrary svgelement within your HTML, and can add controls.
我最终使用了从 SVGPan 派生的svg-pan-zoom，但允许放大/平移svgHTML中的任意元素，并且可以添加控件。
SVGPan works great if your complete page is just a loaded SVG (like the tiger example), but not if your svg is somewhere deeper in the html.
如果您的完整页面只是一个加载的 SVG（如 Tiger 示例），则 SVGPan 效果很好，但如果您的 svg 位于 html 的更深处，则效果不佳。
