canvas - 需要加速我的 SVG。我可以转换为 WebGL 或 Canvas 吗？

Question

我有一个包含 10138 个部分的 SVG 绘图，所以它运行缓慢。
我想让它运行得更像 http://workshop.chromeexperiments.com/globe

这是我正在考虑的解决方案/问题

有没有办法让 SVG 部分以较少处理器密集型的方式呈现？

我可以将 SVG 转换为 WebGL 或 Canvas 吗？

我可以让它作为 SVG 运行但通过 WebGL 或 Canvas 渲染吗？

我只是想让它更快......想法？

这是一个屏幕截图

Answer 1

作为一个简化的经验法则:

SVG 与要绘制的对象数量成正比

Canvas 与分辨率互为缩放。

所以我用 SVG 将 10138 个对象保存在内存中会减慢速度(尽管我不能说硬限制是什么)。如果你进入这个范围的对象，我相信 Canvas 和 WebGL 可能会提供更好的性能。大多数现代浏览器已经支持硬件加速 Canvas 渲染。
然而，与 SVG 相比，Canvas 涉及更多的用户交互。

你也可以尝试混合它们(更多细节见 here)。
以下是一些有用的资源:

SVG swarm对比 Canvas swarm (使用 D3.js)

Stackoverflow有用信息的线程