SVG文本元素速度

Question

我正在构建一个依赖于svg的Web应用程序.作为参考,我使用raphael js库来处理所有这些.

在这个特殊情况下,我实现了一些模仿滚动条的东西,并在屏幕上移动一堆svg功能(~500个元素).这些功能的一部分是<text>(~100)元素.其他因素包括<rect>,<image>和<path>元素.

所以,我注意到我的应用程序在我的笔记本电脑上并不是非常活泼,并且因为速度而在ipad上处理非常烦人.但是,无论何时在滚动期间删除或忽略文本元素,它都会立即达到适当的速度.

我尝试做一些速度测试(非常粗糙的测试,使用new Date().getTime())并发现移动除元素之外的所有元素需要大约10毫秒<text>,但是当<text>包含元素时需要大约120毫秒.

我相信这是因为每个字母都呈现为矢量形状,并且需要大量的处理能力来计算这种复杂结构究竟阻碍了什么.

是否可以只嵌入文本,因此文本呈现为光栅图形,而不是形状？或者以其他任何方式提高渲染文本的性能？

我不需要背景透明度,我也不使用任何花哨的字体.

Answer 1

您可以使用 Canvas 预渲染文本并将图像嵌入到 SVG 中。我不知道这与一般的文本元素渲染相比如何，但是对于我们的演示，这非常有效（请参阅“层次结构”示例中的投影 - 它们首先渲染到画布中，然后从 SVG 中复制和引用）。

请注意，这些演示还大量使用了虚拟化，即如果您放大图像并且只有一些元素实际上在视口内，则其他元素将从 SVG 中删除，这会带来巨大的加速。

演示所做的不仅仅是移动元素，因此应该很容易获得相同甚至更好的性能。

不过，我不知道如何用 raphael 做到这一点，但我相信您也应该能够用 raphael 将画布图像中的数据 url 放入 SVG 中。