IE 11 SVG 动画平滑度

Posted 2023-03-06

【中文标题】IE 11 SVG 动画平滑度

【英文标题】：IE 11 SVG animation smoothness

【发布时间】：2015-09-26 00:09:09

【问题描述】：

我在 IE 11 上的 SVG 平滑度存在很大问题（在 Chrome 上完美运行）。

它应该像实时时间线一样工作。 SVG 元素动态增加它的高度，事件显示在它的时间并且一直下降。问题是移动元素 1px 是可见的并且看起来很糟糕。

在 Chrome 上，我通过添加 transform: rotate(360deg)（现在我也有了 scale()）解决了这个问题，它为这些元素启用了抗锯齿，现在它在那里运行顺利。

不幸的是，IE 上的动画并不流畅。我尝试通过x/y 和translate() 来定位元素。每次请求动画帧时都会精确计算位置。它在包含的光栅图像上更明显（或者我只是这么认为）。我尝试将shape-rendering、text-rendering（用于文本）和image-rendering 用于这些图像。

有简单的JSFiddle：http://jsfiddle.net/9ke74mqo/

还有其他想法吗？

谢谢

【参考方案1】：

如果有人感兴趣，我已经解决了。问题是在 IE 中没有任何可能通过任何svg 元素属性打开抗锯齿。当我将所有内容都打包到 <g transform="rotate(360)" /> 元素中时，一切正常。