jQuery SVG与Raphael [关闭]

我正在使用SVG和JavaScript / jQuery构建交互式界面，并且试图在Raphael和jQuery SVG之间做出选择。我想知道

1. 两者之间的权衡是什么
2. 发展势头似乎在哪里。

我不需要Raphael中的VML / IE支持，也不需要jQuery SVG的绘图功能。我主要对在SVG画布上创建，设置动画和操作单个项目的最优雅方式感兴趣。

我最近同时使用了Raphael和jQuery SVG-这是我的想法：

拉斐尔

优点：良好的入门库，使用SVG可以轻松快速地完成很多事情。良好的书面记录。很多例子和演示。非常可扩展的体系结构。伟大的动画。

缺点：是实际SVG标记的一层，这使得使用SVG难以完成更复杂的操作-例如分组（它支持Set，但不支持分组）。不能很好地编辑现有元素。

jQuery SVG

优点： jQuery插件，如果您已经在使用jQuery。良好的书面记录。很多示例和演示。支持大多数SVG元素，允许轻松地本地访问元素

缺点：体系结构不如Raphael可扩展。有些事情可能会更好地记录在案（例如SVG元素的配置）。不能很好地编辑现有元素。动画依赖SVG语义-并不是那么好。

SnapSVG作为Raphael的纯SVG版本

SnapSVG是Raphael的继任者。仅支持SVG的浏览器支持它，并且几乎支持SVG的所有功能。

结论

如果您要快速简便地做某事，Raphael是一个简单的选择。如果您要做一些更复杂的事情，我选择使用jQuery SVG，因为与Raphael相比，我可以更轻松地操纵实际标记。而且，如果您需要非jQuery解决方案，那么SnapSVG是一个不错的选择。

对于后代，我要指出的是我最终选择了Raphael，这是因为它提供了干净的API和“免费” IE支持，而且由于积极的发展看起来很有希望（例如，仅在0.7中添加了事件支持）。但是，我将不回答这个问题，并且我仍然想听听别人使用Javascript + SVG库的经历。

我是Raphael的忠实拥护者，并且发展势头似乎很强劲（上周晚些时候发布了0.85版）。另一个大的优点是，其开发人员Dmitry Baranovskiy目前正在开发Raphael图表插件g.raphael，看起来它的外观非常漂亮（Flickr早期版本的输出中有一些示例） 。

但是，只是为了将另一个可能的竞争者引入SVG库组合中，Google的SVG Web看起来确实非常有前途（即使我不是Flash的忠实拥护者，它使用Flash在不符合SVG的浏览器中进行渲染）。可能值得一看，尤其是在即将举行的SVG Open会议上。

Raphael肯定更容易设置和运行，但是请注意，有些方法无法在SVG中表达，而Raphael则无法实现。如上所述，没有“组”。这意味着您不能实现坐标变换图层。相反，只有一个坐标变换可用。

如果您的设计依赖于嵌套坐标变换，那么Raphael不适合您。

自六月以来，拉斐尔（Oh Raphael）取得了长足发展。有一个可以使用的新图表库，这些图表非常引人注目。Raphael还支持完整的SVG路径语法，并集成了真正的高级路径方法。快来看我站点上的1.2.8+（Shameless插件），然后从那里弹跳到Dmitry的站点。 http://www.irunmywebsite.com/raphael/raphaelsource.html

我认为这并不是完全无关的，但是您是否考虑过画布？像Process JS这样的东西可以使它更简单。

您还应该看看svgweb。它使用Flash来在IE和其他浏览器中渲染svg（在支持比浏览器本身更多的情况下）。

http://code.google.com/p/svgweb/

我将投票投给Raphael-跨浏览器支持，干净的API和一致的更新（到目前为止）使使用起来很高兴。它与jQuery的配合也很好。处理过程很酷，但是作为当前最先进的东西的演示更有用。

作为Java语言的初学者，我发现Rapahel示例并不那么容易，我建议 http://cancerbero.mbarreneche.com/raphaeltut，这是一个真正的分步教程。

对于那些不关心IE6 / IE7的人，写Raphael的那个人专门为现代浏览器构建了一个svg引擎：Snap.svg ..他们有一个非常不错的网站，带有不错的文档：http : //snapsvg.io

snap.svg易于使用，开箱即用，可以操纵/更新现有的SVG或生成新的SVG。您可以在snap.io关于页面上阅读这些内容，但是这里有一个简要介绍：

缺点

• 要使用snap的功能，您必须放弃对旧版浏览器的支持。Raphael支持IE6 / IE7等浏览器，仅IE9及更高版本，Safari，Chrome，Firefox和Opera支持快照功能。

优点

• 实现SVG的全部功能，例如遮罩，剪切，图案，完整渐变，组等。

• 能够与现有SVG一起使用：不必使用Snap生成内容，就可以与Snap一起使用，从而使您可以使用任何常用的设计工具来创建内容。

• 使用简单易用的JavaScript API全面支持动画

• 与SVG字符串（例如，通过Ajax加载的SVG文件）一起使用时，无需先实际呈现它们，类似于资源容器或Sprite表。

如果您有兴趣，请查看：http : //snapsvg.io

由于这里尚未提到：您还应该看看Dojox.drawing，它也提供了良好的SVG绘制功能。它具有一组令人印象深刻的功能。我只是用它开始一个项目，但是在我看来，它（至少在功能方面）比Raphael和JQuerySVG好得多。

该演示使我确信可以使用它代替Raphael / JQuerySVG：http ://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

参考：http : //dojotoolkit.org/reference-guide/dojox/index.html

关于Dojocampus的参考：http ://docs.dojocampus.org/dojox/drawing

下载Dojo（包括Dojox）：http ://dojotoolkit.org/download/

您可能要查看的另一个svg javascript库是d3.js。http://d3js.org/

我更喜欢使用RaphaelJS，因为它具有强大的跨浏览器功能。但是，使用RaphaelJS（复杂渐变...）无法实现某些SVG和VML效果。

Google还开发了自己的库来在IE中启用SVG支持：http : //svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

如果不需要VML和IE8支持，请使用Canvas（例如PaperJS）。查看适用于Windows 7的最新IE10演示。它们在Canvas中具有惊人的动画。SVG无法执行任何接近它们的操作。所有移动浏览器都提供“总体画布”。SVG无法在Android 2.0- 2.3的早期版本中运行（据我所知）

是的，Canvas无法扩展，但是它是如此之快，以至于您可以比能够滚动查看端口的浏览器更快地重绘整个画布。

从我的角度来看，Microsoft的优化提供了将Canvas用作常规GDI引擎并实现图形应用程序的方法，就像我们现在为Windows所做的那样。