我正在使用 SVG 和 JavaScript/jQuery 开发交互式界面，我正在尝试在Raphael和jQuery SVG之间做出决定。我想知道
- 两者之间的取舍是什么
- 发展势头似乎在哪里。
我不需要 Raphael 中的 VML/IE 支持，也不需要 jQuery SVG 的绘图能力。我主要对在 SVG 画布上创建、动画和操作单个项目的最优雅的方式感兴趣。
Luke Dennis
问问题
106783 次
14 回答
194
我最近使用了 Raphael 和 jQuery SVG - 以下是我的想法：
拉斐尔
优点：一个很好的入门库，很容易用 SVG 快速做很多事情。写得很好，有据可查。大量示例和演示。非常可扩展的架构。非常适合动画。
缺点：是实际 SVG 标记之上的一个层，使得使用 SVG 做更复杂的事情变得困难 - 例如分组（它支持集合，但不支持组）。在编辑现有元素时效果不佳。
jQuery SVG
优点：一个 jquery 插件，如果你已经在使用 jQuery。写得很好，有据可查。大量示例和演示。支持大多数 SVG 元素，允许轻松本地访问元素
缺点：架构不如 Raphael 可扩展。有些事情可以更好地记录（例如配置 SVG 元素）。在编辑现有元素时效果不佳。动画依赖于 SVG 语义——这不是很好。
SnapSVG作为 Raphael 的纯 SVG 版本
SnapSVG 是 Raphael 的继任者。它仅在支持 SVG 的浏览器中受支持，并且几乎支持 SVG 的所有功能。
结论
如果您要快速轻松地做某事，Raphael 是一个简单的选择。如果您要做更复杂的事情，我选择使用 jQuery SVG，因为我可以比使用 Raphael 更容易地操作实际标记。如果你想要一个非 jQuery 解决方案，那么 SnapSVG 是一个不错的选择。
于 2010-03-04T19:01:31.207 回答
53
对于后人，我想指出我最终选择了 Raphael，因为干净的 API 和“免费”的 IE 支持，还因为积极的开发看起来很有希望（例如，事件支持刚刚在 0.7 中添加）。但是，我不会回答这个问题，我仍然有兴趣了解其他人使用 Javascript + SVG 库的经验。
于 2009-03-17T19:32:31.330 回答
26
我是 Raphael 的忠实粉丝，开发势头似乎很强劲（上周晚些时候发布了 0.85 版）。另一个很大的优点是它的开发者Dmitry Baranovskiy目前正在开发一个 Raphael 图表插件g.raphael，它看起来非常漂亮（在Flickr上有一些早期版本的输出示例） .
然而，为了在 SVG 库组合中加入另一个可能的竞争者，Google 的SVG Web看起来确实很有前途（尽管我不是 Flash 的忠实粉丝，它用于在不兼容 SVG 的浏览器中呈现）。可能值得一看，尤其是即将举行的SVG Open 会议。
于 2009-08-10T11:11:02.620 回答
12
Raphael 肯定更容易设置和开始，但请注意，在 SVG 中表达事物的方式在 Raphael 中是不可能的。如上所述，没有“组”。这意味着您无法实现坐标变换层。相反，只有一个坐标变换可用。
如果您的设计依赖于嵌套坐标变换，那么 Raphael 不适合您。
于 2010-08-08T05:48:59.520 回答
11
哦，拉斐尔自 6 月以来取得了长足的进步。有一个新的图表库可以使用它，这些非常引人注目。Raphael 还支持完整的 SVG 路径语法，并结合了非常先进的路径方法。在我的站点（无耻插件）上查看 1.2.8+，然后从那里跳到 Dmitry 的站点。 http://www.irunmywebsite.com/raphael/raphaelsource.html
于 2009-12-30T21:17:48.667 回答
6
我认为这并非完全无关，但您是否考虑过画布？Process JS之类的东西可以使它更简单。
于 2009-02-27T14:49:28.440 回答
6
您还应该看看 svgweb。它使用 flash 在 IE 中呈现 svg，并且可以选择在其他浏览器上呈现（在它支持比浏览器本身更多的情况下）。
于 2009-11-11T19:18:05.127 回答
5
我将投票支持 Raphael - 跨浏览器支持、干净的 API 和一致的更新（到目前为止）使它成为一种乐趣。它也可以很好地与 jQuery 配合使用。处理很酷，但作为目前最前沿的东西的演示更有用。
于 2009-03-24T17:37:38.420 回答
5
作为一个 Javascript 初学者，我发现 Rapahel 示例并不容易，我推荐 http://cancerbero.mbarreneche.com/raphaeltut，这是一个真正的分步教程。
于 2012-12-11T16:14:27.440 回答
5
对于那些不关心 IE6/IE7 的人来说，编写 Raphael 的那个人专门为现代浏览器构建了一个 svg 引擎：Snap.svg .. 他们有一个非常好的网站，有很好的文档：http ://snapsvg.io
snap.svg 开箱即用再简单不过了，它可以操作/更新现有的 SVG 或生成新的 SVG。您可以在 snap.io 的 about 页面上阅读这些内容，但这里有一个简短的介绍：
缺点
- 要使用 snap 的功能，您必须放弃对旧浏览器的支持。Raphael 支持 IE6/IE7 等浏览器，快照功能仅支持 IE9 及更高版本、Safari、Chrome、Firefox 和 Opera。
优点
实现 SVG 的全部功能，如遮罩、剪辑、图案、完整渐变、组等。
使用现有 SVG 的能力：内容不必使用 Snap 生成即可与 Snap 一起使用，允许您使用任何常用设计工具创建内容。
使用简单、易于实现的 JavaScript API 提供完整的动画支持
处理 SVG 字符串（例如，通过 Ajax 加载的 SVG 文件），而无需先实际渲染它们，类似于资源容器或精灵表。
如果您有兴趣，请查看：http: //snapsvg.io
于 2013-10-25T00:37:31.723 回答
3
因为这里还没有提到：您还应该看看Dojox.drawing，它也提供了很好的 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/
于 2011-10-23T22:53:32.567 回答
3
您可能想要查看的另一个 svg javascript 库是 d3.js。http://d3js.org/
于 2013-08-04T23:47:15.737 回答
2
我更喜欢使用 RaphaelJS，因为它具有出色的跨浏览器功能。但是，某些 SVG 和 VML 效果无法使用 RaphaelJS（复杂渐变...）实现。
Google 还开发了自己的库以在 IE 中启用 SVG 支持：http: //svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
于 2011-05-02T21:45:38.953 回答
0
如果您不需要 VML 和 IE8 支持，请使用 Canvas（例如 PaperJS）。查看适用于 Windows 7 的最新 IE10 演示。它们在 Canvas 中有令人惊叹的动画。SVG 无法做任何接近它们的事情。整体 Canvas 可在所有移动浏览器上使用。SVG 在 Android 2.0-2.3 的早期版本中不起作用（据我所知）
是的，Canvas 不可扩展，但速度如此之快，以至于您可以更快地重绘整个画布，然后浏览器能够滚动视口。
从我的角度来看，微软的优化提供了将 Canvas 用作常规 GDI 引擎并实现图形应用程序的方法，就像我们现在为 Windows 所做的那样。
于 2012-11-15T20:54:14.680 回答