jQuery SVG vs. Raphael

我正在使用SVG和JavaScript/jQuery进行交互式界面,我正在尝试在Raphael和jQuery SVG之间做出决定.我想知道

两者之间的权衡是什么

发展势头似乎在哪里.

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

1> Anatoly G..：

---

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

拉斐尔

优点:一个很好的入门库,很容易用SVG快速做很多事情.写得好,记录完整.大量的例子和演示.非常可扩展的架构.伟大的动画.

缺点:是实际SVG标记的一个层,使得难以用SVG做更复杂的事情 - 例如分组(它支持集合,但不支持组).w /编辑现有元素不是很好.

jQuery SVG

优点: jquery插件,如果你已经在使用jQuery.写得好,记录完整.大量的例子和演示.支持大多数SVG元素,允许轻松地对元素进行本机访问

缺点:架构不像Raphael那样可扩展.有些事情可以更好地记录(比如配置SVG元素).w /编辑现有元素不是很好.依赖动画的SVG语义 - 这不是那么好.

SnapSVG是Raphael的纯SVG版本

SnapSVG是Raphael的继任者.它仅在支持SVG的浏览器中受支持,并且几乎支持SVG的所有功能.

结论

如果你正在快速轻松地做事,Raphael是一个简单的选择.如果你要做更复杂的事情,我选择使用jQuery SVG,因为我可以比使用Raphael更容易操作实际标记.如果你想要一个非jQuery解决方案,那么SnapSVG是一个不错的选择.

---

不要忘记RaphaelJS对Internet Explorer的VML具有向后兼容性.这是巨大的,因为SVG不适用于旧版浏览器.

---

RaphaelJS的文档也不是很好,它有限,你有时需要进入SVG或jQuery文档来获取所有信息.也就是说,有了演示(源代码)以及论坛和许多用户,我设法得到了我需要的答案.

---

我刚刚开始使用Raphael并发现文档是我在javascript API中遇到的最好的文档,在更正式的规范旁边有非常清晰的示例

---

另一个jQuery SVG con是该项目虽然该项目是opensoucer(GPL和MIT),但它似乎被其开发者放弃了(版本1.4.5最后更新2012年4月28日).jquery.svg.dom导致与jQuery 1.8的一些冲突.理想情况下,我会等待有人接管该项目,并希望将其放入github

---

问题是关于SVG,而不是向后兼容性.如果欲望是跨浏览器矢量图形,那你就是对的.

2> Luke Dennis..：

---

对于后人,我想注意我最终选择Raphael,因为干净的API和"免费"IE支持,还因为活跃的开发看起来很有希望(例如,事件支持仅添加到0.7).但是,我会留下未回答的问题,我仍然有兴趣了解其他人使用Javascript + SVG库的经历.

3> Rich Pollock..：

---

我是Raphael的忠实粉丝,发展势头似乎很强劲(上周末发布了0.85版本).另一个重要的优点是它的开发者Dmitry Baranovskiy目前正在开发一个Raphael图表插件g.raphael,它看起来很漂亮(Flickr的早期版本有一些输出样本) .

然而,只是为了将另一个可能的竞争者投入到SVG库组合中,谷歌的SVG Web确实看起来非常有前景(尽管我不是Flash的忠实粉丝,它用于在非SVG兼容的浏览器中渲染).可能是一个值得观看的人,特别是即将举行的SVG Open会议.

---

注意到当前版本是2.1.2并不是什么大不了的事.这条评论等待几年后其他人改正......

4> djsadinoff..：

---

拉斐尔肯定更容易设置和开始,但请注意,有些方法可以在SVG中表达拉斐尔无法实现的内容.如上所述,没有"团体".这意味着您无法实现Coordinate Transfomations层.相反,只有一个坐标变换可用.

如果您的设计依赖于嵌套坐标转换,Raphael不适合您.

5> 小智..：

---

自6月以来,拉斐尔已经取得了重大进展.有一个新的图表库可以使用它,这些非常引人注目.Raphael还支持完整的SVG路径语法,并且采用了非常先进的路径方法.在我的网站上看到1.2.8+(无耻插头),然后从那里跳到德米特里的网站. http://www.irunmywebsite.com/raphael/raphaelsource.html

6> Bharani..：

---

我认为这不完全无关,但你考虑帆布吗？像Process JS这样的东西可以使它变得更简单.

---

我已经看过一般的画布和特别是加工.问题是(据我所知)鼠标事件不能轻易附加到画布上的各个项目,对于像拖放这样的功能,不像SVG完全暴露给DOM.

---

鼠标点击是,但不是画布中项目的dom事件.实际上,对于Canvas,您不能将事件处理程序放在画布上(因为IE),尽管您可以将它放在包含画布的div上.

---

canvas非常适合位图,SVG非常适合矢量图形.SVG扩展的能力非常棒.我认为canvas和SVG是互补技术.

7> sroussey..：

---

你还应该看看svgweb.它使用flash在IE中呈现svg,也可以选择在其他浏览器上呈现(在支持浏览器本身的情况下).

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

8> George Mandi..：

---

我将投票支持拉斐尔 - 跨浏览器支持,干净的API和一致的更新(到目前为止)使用起来很愉快.它也非常适合jQuery.处理很酷,但作为目前最前沿的东西的演示更有用.

9> Jean Davy..：

---

作为一个Javascript初学者,我发现Rapahel样本并不那么容易,我推荐 http://cancerbero.mbarreneche.com/raphaeltut,这是一个真正的分步教程.

10> Hutch..：

---

对于那些不关心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文件),而不必先实际渲染它们,类似于资源容器或精灵表.

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