SVG 与 HTML5 Canvas 中的图表答案

【问题标题】：Diagrams in SVG versus HTML5 CanvasSVG 与 HTML5 Canvas 中的图表
【发布时间】：2012-05-06 12:08:03
【问题描述】：

我想开始一个项目，我需要绘制由圆角矩形组成的图表，这些圆角矩形与线条相连，并在单击某些元素时执行 JavaScript 动作。这需要适用于所有现代浏览器。

SVG 和 HTML5 Canvas 似乎都能做到这一点，所以我想知道什么是最好的。

我也不想重新发明轮子，所以如果有图书馆做这样的事情我想知道；我查看了 Raphaël 和其他一些 JavaScript 绘图库，但它们并没有提供我需要的所有功能。在谷歌的API中有这样一个工具，但是非常有限。

【问题讨论】：

什么样的图表？具体有多大？您正在寻找哪些库目前没有的功能？
大小可调整，图为家谱程序
如果我是你，我会使用 svg，并使用诸如骨干网之类的东西来构建它，这样你就可以为你的对象创建模板并保持交互。
@RGB：有这样一张图的骨干例子吗？我将使用 Ruby Sinatra 作为有路由的服务器，我相信骨干网也有路由，那么如何结合？
Ruby +1，Sinatra +1。你走在正确的轨道上，朋友！ :)

标签： html canvas svg

【解决方案1】：

使用 SVG 是因为 - 作为一个 retained-mode 绘图 API - 您可以将事件侦听器直接附加到特定元素，并更改特定元素的属性并神奇地更新页面。此外，作为基于矢量的格式，它与分辨率无关。

相比之下，HTML5 Canvas 是一个 non-retained-mode（又名 immediate-mode）绘图 API；您绘制的每个像素都与画布上的所有其他像素混合，没有原始形状的概念。此外，作为基于光栅的格式，您需要做一些额外的工作才能让绘图命令针对不同的显示尺寸进行调整。

一般来说，当且仅当您需要时才应该使用 Canvas：

直接设置像素（例如模糊、闪亮效果），或
直接获取像素（例如读取用户的绘图以另存为 PNG，sampling portions of the image to detect visual overlaps），或
大量“对象”数量不会移动太多或跟踪单个事件（SVG 重绘数千个对象可能会很慢）。

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

【讨论】：

感谢 Phrogz，但我不确定交互是否会允许我添加一个带连接器的节点并在刷新或往返服务器以重新生成我的整个 SVG 的情况下查看结果。 .
@peter JavaScript 可以动态修改 SVG DOM，添加操作和删除节点（就像在 HTML 中一样）。 Web 浏览器会根据需要自动重绘视图（就像在 HTML 中一样）。相比之下，在画布中，“移动”一个项目需要清除并重新发出所有绘图命令。对于为您维护虚拟对象的库，这并不“难”。查看我的编辑。
@peter，phrogz 是正确的，您可以像使用 javascript 操作 html 一样操作 svg...也是为什么您可以使用backbone.js！ :)
@Phrogz 使用 Canvas 的另一个优势是它在大多数版本的 IE 上表现更好。旧版本没有 SVG 支持，而且现在支持的速度不是很快，绝对无法与 Chrome 甚至 FF 相提并论，尤其是在涉及大量文本对象的情况下。
@Quran - 我发现 SVG 在旧版 IE（以 VML 形式）上的性能非常好，即使是动画也是如此。