我正在构建一个严重依赖 svg 的 Web 应用程序。作为参考，我正在使用 raphael js 库来处理所有这些。
在这种特殊情况下，我实现了一些模仿滚动条并在屏幕上移动一堆 svg 功能（约 500 个元素）的东西。这些功能的一部分是<text>（~100）个元素。其他元素包括<rect>和<image>元素<path>。
所以，我注意到我的应用程序在我的笔记本电脑上并不是很活泼，而且由于速度的原因，在 ipad 上处理起来很烦人。但是，只要在滚动过程中删除或忽略文本元素，它就会立即达到不错的速度。
我尝试进行一些速度测试（非常粗略的测试，使用new Date().getTime()）并发现移动除元素之外的所有元素需要大约 10 毫秒<text>，但是包含元素时需要大约 120 毫秒<text>。
我相信这是因为每个字母都呈现为矢量形状，并且需要大量的处理能力来计算如此复杂的结构究竟阻碍了什么。
是否可以只嵌入文本，因此文本呈现为光栅图形，而不是形状？或者以任何其他方式提高呈现文本的性能？
我不需要背景透明度，也不使用任何花哨的字体。
您可以使用 Canvas 预渲染文本并将图像嵌入到 SVG中。我不知道这与一般的文本元素渲染相比如何，但对于我们的演示，这非常有效（请参阅“层次结构”示例中的阴影 - 它们首先渲染到画布中，然后从 SVG 中复制和引用）。
请注意，这些演示还大量使用了虚拟化，即如果您放大图像并且只有一些元素实际上在视口内，其他元素将从 SVG 中删除，这会带来巨大的加速。
演示不仅仅是移动元素，因此应该很容易获得相同甚至更好的性能。
不过，我不知道如何使用 raphael 执行此操作，但我相信您也应该能够使用 raphael 将画布图像中的数据 url 放入 SVG 中。
根据 Raphael 网站的Paper.print()
创建表示在给定位置以给定大小使用给定字体编写的给定文本的路径
本质上，您的文本被转换为路径。显然这存在性能问题。
可能最好坚持使用Paper.text()
更新
所以不满足于仅仅提出建议，我在http://www.jsperf.com上设置了一些测试。它们可用于比较不同类型的 Raphael 对象的动画和变换性能差异。
如果你在 iPad 上运行这些，它应该会显示文本元素的移动速度是否真的慢得多。需要注意的另一件事是，至少在我运行的测试中，paper.print() 和 paper.text() 在性能方面并没有那么不同。