Safari上的SVG动画工件 [英] SVG animations artifacts on Safari

问题描述

我正在使用d3.js进行svg布局/动画，并且遇到了第一个示例所描述的问题(仅在Safari/Safari移动版上):

I'm using d3.js to do some svg layout/animations and am running into the problem described by the first example here (only on Safari / Safari mobile):

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

(例如，当rect +文本移动时，它会在其路径中保留渲染伪像)

(e.g., when the rect+text moves, it leaves rendering artifacts in its path)

有人知道解决方法吗?

我能找到的唯一类似问题是这个未回答的问题:

The only similar question on SO I could find is this unanswered one:

Canvas在Safari中绘制工件以进行动画，填充贝塞尔曲线

推荐答案

您绝对应该为此提交WebKit错误报告.您已经将其简化为一个非常清晰的测试用例，因此应该可以使某人更容易对其进行修复.

You should definitely file a WebKit bug report on this. You've already reduced it to a very clear test case, so that should make it easier for someone to fix it.

任何基于水平位置强制重绘的东西似乎都可以解决.我注意到，只是切换到另一个选项卡，然后又使它重新绘制.如何对内容区域进行重新定位，例如，向右移动1px，然后向左移动1px，以强制重绘?它虽然不漂亮，但是比人工制品要好.

Anything that forces a redraw based on horizontal positioning seems to fix it. I noticed just by switching to another tab and back caused it to redraw. What about doing a reposition of the content area, e.g., move right 1px then left 1px, to force a redraw? It's not pretty, but it's better than artifacts.

这篇关于Safari上的SVG动画工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！