SVGアニメーションがIE11上で動作しない

Question

FirefoxとChromeで完全に機能する単純な読み込みアニメーションがありますが、IE11ではSVGフィギュアが表示されません。ここ

は完全な例である： 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でサポートされていないものを把握できません。

Answer 1

IEはSVG要素のCSSアニメーションをサポートしていません。 SVGが持つ標準の組み込みSMILアニメーションもサポートしていません。

アニメーションをネイティブSVGアニメーションに変換する場合は、おそらくFakeSmile libraryを使用してアニメーションを動作させることができます。それ以外の場合は、アニメーションGIFなど、IEの代替代替手段を使用する必要があります。

Answer 2

Microsoft EdgeのみがSVG CSSトランジションとアニメーション、特にstroke-dasharrayをサポートします。

マイクロソフト開発者向けドキュメントを参照してください。

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

はSVG要素に適用するCSSトランジションやアニメーションを可能にします。
接頭部なしのバージョン：あなたはあなたの例の私のフォークに見ることができるように、マイクロソフトエッジは10240+

を構築します。あなたのcircle要素にstroke属性がないため、ローダーの回転が見られませんでした。

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

あなたはそれが今でスピンすることができますどのように見ることができます。しかし、ブラウザがIEかどうかをチェックして、stroke-dasharrayを調整してダッシュを大きくする必要があります。 IE11以降では、SVG stroke-dasharrayおよびstroke-dashoffsetにCSSアニメーションまたはトランジションをアニメーション化することはできません（Microsoft Edge build 10240+以外の場合）。

しかし、SVGをアニメーション化するクロスブラウザソリューションが必要な場合は、特にstroke-dasharrayとstroke-dashoffsetが必要です。次に、GreenSock Animation Platform（GSAP）のようなJSアニメーションライブラリを使用して調べます。これで問題を抱えて誰のためのDrawSVGPlugin

https://greensock.com/drawSVG

Answer 3

を使用して、私は回避策があります。

IDとCSSアニメーションを含む完全なSVGを持っていて、他の主要なブラウザでも機能しています。

私は自分のSVGをHTMLに挿入しているので、CSSアニメーションのすべてのアイテムにアクセスできます。これが機能するために

、あなたが位置して、あなたのSVGを持っている必要があります：コンテナ.svgcontent内...

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

（またはあなたがそれを呼び出すために好きな）

スクリプト：

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として挿入します彼は最初の1つ（この動作を変更するにはprependをappendに変更できます）。

SVGはオブジェクトと同じIDを持つため、CSSアニメーションはSVGオブジェクトではなく完全SVGに適用されます。

それだけです！