我在使用SVG和JavaScript/jQuery的交互界面上工作,我试图在Raphael和jQuery SVG之间做出决定。我想知道
这两者之间的权衡是什么 发展势头似乎在哪里。
我不需要Raphael中的VML/IE支持,也不需要jQuery SVG的绘图功能。我主要感兴趣的是在SVG画布上创建、制作动画和操作单个项目的最优雅的方法。
我在使用SVG和JavaScript/jQuery的交互界面上工作,我试图在Raphael和jQuery SVG之间做出决定。我想知道
这两者之间的权衡是什么 发展势头似乎在哪里。
我不需要Raphael中的VML/IE支持,也不需要jQuery SVG的绘图功能。我主要感兴趣的是在SVG画布上创建、制作动画和操作单个项目的最优雅的方法。
当前回答
作为一个Javascript初学者,我发现Rapahel的例子不是那么容易,我推荐http://cancerbero.mbarreneche.com/raphaeltut,这是一个真正的一步一步的教程。
其他回答
Raphael确实更容易设置和运行,但请注意,在SVG中有一些表示事物的方法在Raphael中是不可能的。如上所述,没有“组”。这意味着您不能实现坐标转换的层。相反,只有一个坐标变换可用。
如果您的设计依赖于嵌套坐标变换,Raphael不适合您。
作为一个Javascript初学者,我发现Rapahel的例子不是那么容易,我推荐http://cancerbero.mbarreneche.com/raphaeltut,这是一个真正的一步一步的教程。
如果你不需要VML和IE8支持,那么就使用Canvas(例如PaperJS)。看看最新的针对Windows 7的IE10演示。他们在Canvas上有很棒的动画。SVG不能做任何接近它们的事情。 Canvas在所有移动浏览器上都可用。SVG在Android 2.0- 2.3的早期版本中不起作用(据我所知)
是的,画布是不可伸缩的,但它是如此之快,你可以重新绘制整个画布更快,然后浏览器能够滚动查看端口。
从我的角度来看,微软的优化提供了使用Canvas作为常规GDI引擎和实现图形应用程序的方法,就像我们现在在Windows上做的那样。
因为这里还没有提到: 您还应该看看Dojox。它还提供了良好的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/
对于那些不关心IE6/IE7的人来说,编写Raphael的同一个人专门为现代浏览器构建了一个svg引擎:Snap.svg…他们有一个非常好的网站,上面有很好的文档:http://snapsvg.io
svg开箱即用再容易不过了,它可以操作/更新现有svg或生成新的svg。你可以在照片上看到这些东西。IO关于页面,但这里有一个快速运行:
Cons
为了使用snap的功能,你必须放弃对旧浏览器的支持。Raphael支持IE6/IE7等浏览器,snap功能仅支持IE9及以上版本,Safari, Chrome, Firefox和Opera。
Pros
Implements the full features of SVG like masking, clipping, patterns, full gradients, groups, and more. Ability to work with existing SVGs: content does not have to be generated with Snap for it to work with Snap, allowing you to create the content with any common design tools. Full animation support using a straightforward, easy-to-implement JavaScript API Works with strings of SVGs (for example, SVG files loaded via Ajax) without having to actually render them first, similar to a resource container or sprite sheet.
如果你感兴趣,请访问:http://snapsvg.io