javascript - IE 11 SVG 动画流畅度

Question

我在 IE 11(在 Chrome 上完美运行)上遇到了 SVG 平滑度的大问题。

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

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

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

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

还有其他想法吗？

谢谢

Answer 1

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