Safari 上的 SVG 动画工件答案

【问题标题】：SVG animations artifacts on SafariSafari 上的 SVG 动画工件
【发布时间】：2012-07-10 13:06:03
【问题描述】：

我正在使用 d3.js 做一些 svg 布局/动画，遇到了这里第一个示例描述的问题（仅在 Safari/Safari 移动设备上）：

（例如，当 rect+text 移动时，它会在其路径中留下渲染伪影）

有人知道解决方法吗？

我能找到的关于 SO 的唯一类似问题是这个未回答的问题：

【问题讨论】：

【解决方案1】：

您绝对应该就此提交一份 WebKit 错误报告。您已经将其简化为一个非常清晰的测试用例，这样应该可以让其他人更容易修复它。

任何基于水平定位强制重绘的东西似乎都可以解决它。我注意到只是通过切换到另一个选项卡并返回导致它重绘。如何重新定位内容区域，例如，向右移动 1px 然后向左移动 1px，以强制重绘？不漂亮，但比人工制品好。

【讨论】：

FWIW，这里的测试用例不是我的，但它是少数几个有人提到它的地方之一。我会试试这个位置，看看是否有帮助。
哦，根据他网站上的链接，问题已在 webkit 中修复，但我仍然在 Safari iPad 和 Windows 中看到问题（还没有尝试过 Mac）。 bugs.webkit.org/show_bug.cgi?id=74002
遗憾的是，SVG 在 Web 上的状态不是很好。那里有 90%，但仍有许多极端情况尚未解决。我为 iOS 写了一个 SVG 渲染器，工作量很大，我什至没有接触动画。
目前看起来相当不错——尝试一些 d3.js 示例，但我还没有找到在 IOS 上运行不佳的示例。我只遇到了一些丑陋的问题，主要是字体/文本。这个问题是我目前看到的唯一一个通用的渲染问题。
这个答案几乎就是我修复它的方式。如果我逐帧进行，则 IOS 上的动画会有点不稳定，但如果我等到最后进行清理，那还不错。希望 IOS 6 会有最新的 webkit 补丁。