javascript - HTML5 SVG vs Canvas 用于大量行？

Question

问题: 在下面的情况下，canvas 比 svg 更合适吗？

案例: 我正在绘制一个与此类似的图表(使用 d3js 库)(但数据更多):

http://mbostock.github.com/d3/talk/20111116/iris-parallel.html

它基于 svg 并且它适用于数千行(最多 5000 行)，添加更多行(svg 路径)会显着降低性能(页面滚动变慢)

请记住:我需要添加鼠标事件(这在 svg 中很方便)

Answer 1

通常 svg 更适合矢量图像，就像您的示例一样。然而canvas在现代浏览器中有很多好处，比如硬件加速，所以对于画线，只要缩放，平移等等。不需要性能将使用 canvas。

使用 canvas 鼠标事件可能会很痛苦，因为您必须手动跟踪所有内容，因此使用 canvas 超过 5000 个点将不会很有趣。然而，一旦绘制了点，就需要权衡取舍，假设您只在页面表现良好时绘制它们，而不管行数如何，因为它们都是绘制到光栅图像并且不是 DOM 的一部分。

老实说，虽然找到它的最佳方法是测试您当前使用 Canvas 的内容。