SVG動畫是不是在IE11

工作，我有一個非常簡單的加載動畫，關於Firefox和Chrome完美的作品，但在IE11它沒有顯示的SVG圖形。SVG動畫是不是在IE11

下面是完整的例子： JSFiddle sample

SVG：

<svg class="circular-loader" viewBox="25 25 50 50"> 
    <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> 
</svg>

動畫，這是一個旋轉，正在IE11，但SVG，這是一個圓，是不是被顯示。

任何想法？

我只是不知道什麼是不支持的IE11。

來源

2015-11-19 canute

哪個版本的IE？ –

在瀏覽器11上進行Im測試 – canute

您必須爲您在IE中看到的顏色定義筆觸屬性。但我認爲你將不得不使用單獨的CSS動畫屬性來代替簡單的'animation' CSS屬性。你可以在這裏看到：http：//jsfiddle.net/z8w4vuau/50/ ..我如何在'.loader-path''' circle'元素上添加'stroke'屬性並增加了'stroke-dasharray'所以你可以看到它正在旋轉，但是IE並沒有爲你的'stroke-dasharray'和'stroke-dashoffset'設置動畫。因此，只需使用長格式的CSS動畫屬性即可。 –

IE不支持SVG元素的CSS動畫。它也不支持SVG標準的內置SMIL動畫。

如果您將動畫轉換爲原生SVG動畫，則可以使用FakeSmile library來使其工作。否則，你將需要使用一些替代回退的IE - 例如動畫GIF或其他東西。

來源

2015-11-20 03:33:48

這種後備將如何看起來像CSS代碼？ – nerdess

只有Microsoft Edge將支持SVG CSS轉場和動畫......尤其是stroke-dasharray。

請請參閱Microsoft Developer文檔：

https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

允許CSS過渡和動畫應用到SVG元素。
前綴的版本：微軟邊緣積聚10240+

正如你可以在我的例子叉見。由於circle元素上沒有stroke屬性，因此沒有看到加載程序旋轉。

https://jsfiddle.net/z8w4vuau/50/

你可以看到它現在可以旋轉。但你將不得不檢查瀏覽器是否爲IE，並調整你的stroke-dasharray，以便它更大。由於IE11及以下版本不支持使用CSS動畫或轉換動畫SVG stroke-dasharray和stroke-dashoffset，除非它是Microsoft Edge構建10240+。

但是，如果您需要跨瀏覽器解決方案來爲SVG設置動畫效果，尤其是stroke-dasharray和stroke-dashoffset。然後看看使用JS動畫庫，如GreenSock Animation Platform（GSAP）。使用DrawSVGPlugin

https://greensock.com/drawSVG

來源

2015-11-20 13:59:40

在Edge（20.10240.16384.0）中查看它根本不起作用。我刪除了小提琴中不需要的所有內容，以便更容易地看到它：http://jsfiddle.net/z8w4vuau/55/ –

Microsoft聲明它支持stroke-dasharray上的CSS動畫，以參考stroke-dasharray頁面https://msdn.microsoft.com/en-us/library/ff972274(v=vs.85).aspx ..但它是IE所以越野車或非工作行爲預計爲CSS轉換和CSS動畫..可能是瀏覽器錯誤？但是你有沒有試過尋找像GreenSock GSAP DrawSVGPlugin這樣的JS解決方案？檢查在IE邊緣在這個頁面上的例子.. http://greensock.com/drawSVG –

我在一個JS庫的飲食，所以要說:)但我意識到，我可以用JavaScript做到這一點。但是，這並不重要，所以我只是在IE/Edge中檢測並禁用這些動畫，直到它被修復。 –

對於遇到問題，這個人，我有一個解決辦法。

我有一個完整的SVG ID和CSS動畫，都適用於所有其他主流瀏覽器。

我把我的SVG插入到HTML中，所以我可以訪問CSS動畫的每個項目。

對於這個工作，你必須有你的SVG與位置：

absolute; top: 0px; left: 0px,

...一個容器內.svgcontent（或任何你想將它命名）

腳本：

var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false; 
objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ]; 
if (IE){ 
    objs.forEach(function (item) { 
     item = $(item); 
     id = item.attr('id'); 
     svgcontent = item.closest('.svgcontent') 
     svg = item.closest('svg'); 
     svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' ' 
     html = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>'; 
     item.remove(); 
     $(svgcontent).prepend(html);   
    }); 
}

這將獲取objs數組中的所有元素，並將它們作爲完整的SVG插入到t他第一個（你可以改變prepend到append來改變這種行爲）。

而SVG將與對象具有相同的id，因此CSS動畫將應用於完整的SVG，而不是SVG對象。

就是這樣！

來源

2017-08-31 13:40:59 Gabiton

你可以提供一個工作[jsFiddle]（https://jsfiddle.net/），證明它可以在IE中使用嗎？ –

SVG動畫是不是在IE11

回答

相關問題