IE 11 SVG动画平滑度

Question

我在IE 11上遇到了SVG平滑性的大问题（在Chrome上完美运行）。

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

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

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

这里有一个简单的JSFiddle：http://jsfiddle.net/9ke74mqo/ 有人有其他想法吗？

谢谢

- Dawid Rusnak

Answer 1

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

- Dawid Rusnak