SVG与HTML5画布中的图表

Question

我想启动一个项目，需要绘制由圆角矩形和连接线组成的图表，以及点击某些元素时触发JavaScript操作。这需要在所有现代浏览器中工作。

SVG和HTML5 Canvas似乎都能够做到这一点，所以我想知道哪个更好。

此外，我不想重复造轮子，如果有可以完成这些任务的库，我希望知道；我查看了Raphaël和其他一些JavaScript绘图库，但它们没有给我所需的所有功能。在Google的API中有一个这样的工具，但它非常有限。

- peter

---

什么样的图表？大小是多少？您正在寻找哪些库目前没有的功能？ - Simon Sarris

大小应可调节，该图是用于族谱程序的。 - peter

我有这个 https://github.com/raddrick/svgb/ ，它已经有一段时间没有更新了...但基本上就是这样。 - raddrick

Simon：我会的，但是你是在暗示Canvas更适合这个吗？我看到你有一些SVG的答案，所以我认为你应该站在SVG这边吧？ - peter

@peter 或许神仙可以，但我肯定不行 :) - Phrogz

Answer 1

使用SVG，因为它是一种保留模式的绘图API，你可以直接将事件监听器附加到特定元素上，更改特定元素的属性，并使页面神奇地更新。此外，作为基于矢量的格式，它具有分辨率无关性。

相比之下，HTML5 Canvas是一种非保留模式（或称即时模式）的绘图API；您绘制的每个像素都会与画布上的所有其他像素混合在一起，没有原始形状的概念。此外，作为基于光栅的格式，您需要进行一些额外的工作，以使绘图命令调整到不同的显示大小。

一般来说，只有需要以下情况时才应使用Canvas：

1. 直接设置像素（例如模糊，闪闪发光效果），或
2. 直接获取像素（例如读取用户的绘画并保存为PNG，采样部分图像以检测视觉重叠），或
3. 大量的“对象”几乎不移动或跟踪单个事件（SVG在具有数千个对象时可能重新绘制缓慢）。

请注意，您不必只选择其中之一。您可以将SVG绘制到画布上。您可以在SVG中包含位图（图像）。您甚至可以通过<foreignElement>将HTML5 Canvas包含在SVG中。您可以拥有一个单独的HTML页面，其中包含多个带有透明背景的分层画布和SVG元素，混合每个输出。

- Phrogz

---

谢谢Phrogz，但我不确定这种交互是否允许我添加带有连接器的节点，并在不刷新或往返服务器重新生成整个SVG的情况下查看结果。 - peter

@peter JavaScript可以动态修改SVG DOM，添加、操作和删除节点（就像在HTML中一样）。Web浏览器会自动根据需要重新绘制视图（就像在HTML中一样）。相比之下，在画布中，“移动”一个项目需要清除并重新发出所有绘图命令。如果使用维护虚拟对象的库，这并不是“困难的”。请参见我的编辑。 - Phrogz

@peter，phrogz说得对，你可以像使用JavaScript操作HTML一样操作SVG...这也是为什么你可以使用backbone.js的原因！ :) - raddrick

@Phrogz 使用Canvas的另一个优点是它在大多数IE版本上表现更好。旧版IE中没有SVG支持，而现在的一些SVG支持也不太快，绝对不能与Chrome或甚至FF相比，特别是涉及大量文本对象的情况下。 - Qnan

@Quran - 我发现在旧版IE上（以VML形式）使用SVG的性能非常可靠，即使用于动画效果也是如此。 - Jimmy Breck-McKye