logo标签列表

jQuery SVG与Raphael的比较

javascriptjquerysvgraphael
255

我正在使用SVG和JavaScript/jQuery制作交互式界面，我正在尝试在Raphael和jQuery SVG之间进行选择。我想知道：

  1. 两者之间的权衡是什么
  2. 开发动力似乎在哪里。

我不需要Raphael中的VML/IE支持，也不需要jQuery SVG的绘图功能。我主要关注的是在SVG画布上创建、动画化和操作单个项目的最优雅的方法。

14个回答
194

我最近使用了Raphael和jQuery SVG——以下是我的想法：

Raphael

优点：一个不错的入门库，可以快速地完成许多SVG操作。写得很好并且有文档支持。有许多示例和演示。架构可扩展性强。对动画非常出色。

缺点：是实际SVG标记的一层，使得使用SVG进行更复杂的事情（如分组）变得困难（它支持集合，但不支持群组）。对于已经存在的元素编辑能力不佳。

jQuery SVG

优点：是一个jQuery插件，如果你已经在使用jQuery就方便很多。写得很好并且有文档支持。有许多示例和演示。支持大多数SVG元素，可以轻松地访问元素。

缺点：架构没有Raphael那么可扩展。有些东西可能需要更好的文档支持（例如SVG元素的配置）。对于已经存在的元素编辑能力不佳。依赖SVG语义进行动画-这不太好。

SnapSVG作为Raphael的纯SVG版本

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

结论

如果你要快速、简单地完成一些操作，Raphael是一个不错的选择。如果你要做更复杂的事情，我选择使用jQuery SVG，因为我可以比Raphael更容易地操纵实际的标记。如果你想要一个非jQuery解决方案，那么SnapSVG是一个不错的选择。

15
RaphaelJS 的文档也不是很好，有限制，有时需要查看 SVG 或 jQuery 的文档才能获取所有信息。尽管如此，由于演示（源代码）可用以及论坛和许多用户，我还是能够得到所需的答案。 - Roalt
11
我刚开始使用 Raphael，发现它的文档是我见过的最好的 JavaScript API 文档之一，既有详细的规范说明，又有清晰明了的示例。 - wheresrhys
71
请记得 RaphaelJS 具有针对 Internet Explorer 的 VML 向后兼容性。这非常重要，因为 SVG 不适用于旧版本的浏览器。 - strongriley
3
问题特别针对SVG，不是关于向后兼容性。如果想要跨浏览器矢量图形，你是正确的。 - Anatoly G
4
jQuery SVG 的另一个缺点是，尽管该项目是开源的（GPL和MIT），但似乎被开发者抛弃了（最后更新版本为1.4.5，更新时间为2012年4月28日）。jquery.svg.dom 会与 jQuery 1.8 发生一些冲突。理想情况下，我希望有人接管这个项目，并且将其放到 GitHub 上。 - Hoffmann
显示剩余5条评论
53

为了后人记录，我想指出我最终选择了 Raphael，因为它具有简洁的API和“免费”的IE支持，并且由于积极的开发看起来很有前途（例如，事件支持刚在 0.7 版本中添加）。然而，我会让这个问题保持未回答状态，并且我仍然很感兴趣听到其他人使用JavaScript + SVG库的经验。

1
Raphael的良好IE支持非常棒。在IE中拥有圆角的正方形？...没问题 ;) - Peter Ajtai
26

我是 Raphael 的忠实粉丝，开发动力似乎依旧不减（上周末发布了 0.85 版本）。另一个大亮点是其开发者 Dmitry Baranovskiy 目前正在开发一款 Raphael 图表插件 g.raphael，看起来非常出色（早期版本的输出样本可以在 Flickr 上找到）。

然而，为了把可能的 SVG 库选择多样化，Google 的 SVG Web 看起来也很有前途（尽管它使用 Flash 在非 SVG 兼容浏览器中呈现，我并不是 Flash 的狂热爱好者）。特别是随着即将到来的 SVG Open 大会，这个库值得关注。

1
目前是 Raphael 版本 1.5.2。 - topright gamedev
3
注意到当前版本为2.1.2并非什么大不了的事情。这条评论可能会在未来几年内被其他人纠正... - Tebe
几年后，我找到了它，现在是Raphael v2.2.1。 - Nathangrad
12

Raphael肯定更容易设置并开始使用，但请注意，在SVG中有些表达方式在Raphael中不可能实现。如上所述，没有“组”。这意味着您无法实现坐标转换的层级。只有一个可用的坐标变换。

如果您的设计依赖于嵌套的坐标转换，则不适合使用Raphael。

11

自六月以来，Raphael已经有了很大的进展。有一个新的图表库可以与之配合使用，非常引人注目。Raphael还支持完整的SVG路径语法，并正在整合真正先进的路径方法。来看看我的网站上的1.2.8+版本（不要在意我这个自夸），然后从那里跳到Dmitry的网站。 http://www.irunmywebsite.com/raphael/raphaelsource.html

6

您还应该看看svgweb。它使用flash在IE中呈现svg，并可选地在其他浏览器上使用（在它支持的情况下，超过了浏览器本身的支持）。

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

6

我认为这与画布(canvas)不完全无关，您考虑过像Process JS这样的东西吗？它可以使它更简单易懂。

12
我已经查看了画布(Canvas)的一般情况和Processing(处理)特别的情况。问题是（据我所知），与SVG不同，鼠标事件不能轻松地附加到画布上的单个项目上，以实现拖放等功能，因为SVG完全暴露在DOM中。 - Luke Dennis
1
我对画布的工作并不是很熟悉，但可以看看Flot——一个使用画布绘制图表的jquery插件。它能够很好地处理鼠标点击事件。 - Bharani
4
可点击的是鼠标左键，但不能在画布上处理dom事件。实际上，对于Canvas，您无法将事件处理程序直接放在画布上（因为IE浏览器的限制），尽管您可以将其放在包含Canvas的div上。 - Nosredna
3
Canvas非常适合位图图形，SVG非常适合矢量图形。SVG的可伸缩能力非常出色。我认为Canvas和SVG是互补的技术。 - Anatoly G
关于画布的鼠标事件，请看一下 Easel.js，它可以为您处理所有这些。 - Neil
5
对于那些不关心IE6/IE7的人，Raphael的作者为现代浏览器构建了一个专门的SVG引擎：Snap.svg.. 他们有一个非常好的网站和良好的文档：http://snapsvg.io snap.svg非常容易使用，并且可以处理/更新现有的SVG或生成新的SVG。您可以在snap.io的页面上阅读这些信息，但是以下是快速介绍： 缺点 - 要利用Snap的功能，您必须放弃对较旧浏览器的支持。 Raphael支持诸如IE6/IE7之类的浏览器，而Snap仅受IE9及更高版本，Safari，Chrome，Firefox和Opera的支持。 优点 - 实现SVG的全部功能，例如掩模、剪辑、图案、全渐变、组等。 - 能够使用现有的SVG：内容不必由Snap生成才能使用Snap，使您能够使用任何常见的设计工具创建内容。 - 使用简单、易于实现的JavaScript API提供完整的动画支持。 - 可以使用SVG字符串（例如通过Ajax加载的SVG文件）而无需首先将其呈现，类似于资源容器或精灵表。
如果您有兴趣，请查看：http://snapsvg.io
5
我会支持Raphael - 它支持跨浏览器，API简洁易懂且一直有更新（到目前为止），使用起来非常愉快。它也与jQuery非常兼容。Processing很酷，但目前更适用于演示最新技术。
5
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接