javascript - Safari 上的 SVG 动画工件

Question

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

http://www.mysparebrain.com/svgbug.html

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

有谁知道这个的解决方法？

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

Canvas 在 Safari 中为动画填充贝塞尔曲线绘制工件

Answer 1

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

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