jQuery SVG vs.拉斐尔

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

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

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

106868 次浏览
小开

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

小开

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

小开

我会把我的票投给Raphael——跨浏览器支持，干净的API和一致的更新(到目前为止)使它使用起来很愉快。它也可以很好地使用jQuery。处理很酷，但更有用的是作为当前前沿技术的一个演示。

小开

我是Raphael的超级粉丝，开发势头似乎很强劲(上周晚些时候发布了0.85版本)。另一个很大的优点是，它的开发者德米特里•Baranovskiy目前正在开发一个Raphael绘图插件g.raphael，看起来它的形状相当光滑(有一些来自Flickr的早期版本的输出示例)。

然而，为了在SVG库中加入另一个可能的竞争者，谷歌的SVG Web看起来确实很有前途(尽管我不是Flash的忠实粉丝，它使用Flash在非SVG兼容的浏览器中渲染)。可能是值得关注的，特别是即将到来的SVG开放会议。

小开

您还应该看看svgweb。它使用flash在IE中渲染svg，也可选择在其他浏览器上渲染(在它支持的比浏览器本身更多的情况下)。

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

小开
哦，拉斐尔自六月以来已经有了很大的进步。 有一个新的图表库可以使用它，这些非常引人注目。 Raphael还支持完整的SVG路径语法，并结合了真正高级的路径方法。来看看1.2.8+在我的网站(无耻插头)，然后从那里跳到德米特里的网站。 http://www.irunmywebsite.com/raphael/raphaelsource.html < / p >
小开
最佳答案

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

拉斐尔

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

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

jQuery SVG

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

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

SnapSVG作为拉斐尔的纯SVG版本

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

结论

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

小开

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

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

小开

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

谷歌还开发了自己的库，以在IE中支持SVG: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip < / p >
小开

因为这里还没有提到: 你还应该看看Dojox.drawing，它也提供了良好的SVG绘图功能。它有一系列令人印象深刻的功能。我刚开始用它做一个项目，但在我看来它比Raphael和JQuerySVG要好得多(至少在特性方面)。< / p > 这个演示说服了我使用它而不是Raphael/JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082 < / p > < p >参考: http://dojotoolkit.org/reference-guide/dojox/index.html < / p >

Dojocampus参考: http://docs.dojocampus.org/dojox/drawing < / p > 下载Dojo(包括Dojox): http://dojotoolkit.org/download/ < / p >

小开
如果你不需要VML和IE8支持，那么就使用Canvas(例如PaperJS)。看看最新的针对Windows 7的IE10演示。他们在Canvas上有很棒的动画。SVG不能做任何接近它们的事情。 Canvas在所有移动浏览器上都可用。SVG在Android 2.0- 2.3(据我所知)的早期版本中不工作

是的，画布是不可伸缩的，但它是如此之快，你可以重新绘制整个画布更快，然后浏览器能够滚动查看端口。

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

小开

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

小开

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

小开

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

svg开箱即用再容易不过了，它可以操作/更新现有svg或生成新的svg。你可以在照片上看到这些东西。IO关于页面，但这里有一个快速运行:

缺点

  • 为了使用snap的功能，你必须放弃对旧浏览器的支持。Raphael支持IE6/IE7等浏览器，snap功能仅支持IE9及以上版本，Safari, Chrome, Firefox和Opera。

优点

  • 实现SVG的全部功能，如掩蔽、剪切、模式、完全渐变、组等。

  • 能够与现有svg一起工作:内容不需要用Snap生成，它可以与Snap一起工作，允许您使用任何常见的设计工具创建内容。

  • 完整的动画支持，使用简单，易于实现的JavaScript API

  • 使用SVG字符串(例如，通过Ajax加载的SVG文件)，而无需首先实际呈现它们，类似于资源容器或精灵表。

如果你感兴趣，可以查看:http://snapsvg.io


提交答案