IE 11 SVG動畫平滑度

Question

我在IE 11上的SVG平滑度問題很嚴重（在Chrome上運行得很好）。

它應該像實時時間線一樣工作。 SVG元素動態地增加它的高度，事件顯示在它的時間並且一直向下。 問題是以1px移動元素是可見的並且看起來很糟糕。

在Chrome上我通過添加transform: rotate(360deg)解決了這個問題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)" />元素中打包所有內容時，一切正常。