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

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

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

(例如,当 rect+text 移动时,它会在其路径中留下渲染伪影)

有人知道解决方法吗?

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

Canvas draws artifacts in Safari for animated, filled bezier curves

【问题讨论】:

    标签: javascript safari svg mobile-safari d3.js


    【解决方案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 补丁。
    猜你喜欢
    • 2021-10-25
    • 2019-06-02
    • 2021-02-04
    • 2015-11-09
    • 2018-10-17
    • 2018-01-17
    • 1970-01-01
    • 2018-03-01
    • 1970-01-01
    相关资源
    最近更新 更多