我在使用SVG和JavaScript/jQuery的交互界面上工作,我试图在Raphael和jQuery SVG之间做出决定。我想知道

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

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


当前回答

Raphael确实更容易设置和运行,但请注意,在SVG中有一些表示事物的方法在Raphael中是不可能的。如上所述,没有“组”。这意味着您不能实现坐标转换的层。相反,只有一个坐标变换可用。

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

其他回答

我认为这不是完全无关的,但是你考虑过帆布吗?像Process JS这样的东西可以让它更简单。

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

为了子孙后代,我想指出的是,我最终选择了Raphael,因为它干净的API和“免费”的IE支持,也因为它的积极开发看起来很有前途(例如,事件支持只是在0.7中添加的)。然而,我将不回答这个问题,我仍然有兴趣了解其他人使用Javascript + SVG库的经验。

我更喜欢使用RaphaelJS,因为它具有出色的跨浏览器能力。然而,有些SVG和VML效果无法用RaphaelJS实现(复杂的渐变…)

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

我最近同时使用了Raphael和jQuery SVG -以下是我的想法:

拉斐尔

优点:一个很好的入门库,很容易用SVG快速做很多事情。良好的书写和记录。大量的例子和演示。非常可扩展的体系结构。擅长动画。

缺点:是实际SVG标记之上的一层,使得用SVG做更复杂的事情变得困难——比如分组(它支持集,但不支持组)。不做伟大的w/编辑已经存在的元素。

jQuery SVG

优点:一个jquery插件,如果你已经在使用jquery。良好的书写和记录。大量的例子和演示。支持大多数SVG元素,允许本地轻松访问元素

缺点:架构不像Raphael那样可扩展。有些东西可以更好地记录(比如SVG元素的配置)。不做伟大的w/编辑已经存在的元素。动画依赖SVG语义——这不是很好。

SnapSVG是Raphael的纯SVG版本

SnapSVG是Raphael的继承者。它只在支持SVG的浏览器中得到支持,并且支持SVG的几乎所有特性。

结论

如果你想做一些快速简单的事情,拉斐尔是一个简单的选择。如果要做一些更复杂的事情,我选择使用jQuery SVG,因为我可以比使用Raphael更容易地操作实际标记。如果你想要一个非jquery的解决方案,那么SnapSVG是一个很好的选择。