web-dev-qa-db-ja.com

IE11でSVGアニメーションが機能しない

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

完全な例は次のとおりです。 JSFiddleサンプル

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でサポートされていないものがわかりません。

cssanimationsvginternet-explorer-11
27
canute

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

Microsoft Developer Docsをご覧ください：

https://dev.windows.com/en-us/Microsoft-Edge/platform/status/csstransitionsanimationsforsvgelements

CSSトランジションとアニメーションをSVG要素に適用できます。
プレフィックスなしバージョン：Microsoft Edgeビルド10240+

あなたの例の私のフォークで見ることができるように。 stroke要素にcircle属性がないため、ローダーのスピンは見られませんでした。

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

今、どのように回転するかを見ることができます。ただし、ブラウザがIEであるかどうかを確認し、stroke-dasharrayなので、ダッシュが大きくなります。 IE11以下ではSVGのアニメーション化がサポートされていないためstroke-dasharrayおよびstroke-dashoffset Microsoft Edgeビルド10240+でない限り、CSSアニメーションまたは遷移を使用します。

ただし、SVGをアニメーション化するためにクロスブラウザソリューションが必要な場合、特にstroke-dasharrayおよびstroke-dashoffset、次に GreenSock Animation Platform （ [〜＃〜] gsap [〜＃〜] ）のようなJSアニメーションライブラリを使用して調べます。 DrawSVGPlugin を使用する

https://greensock.com/drawSVG

25
Jonathan Marzullo

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

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

6
Paul LeBeau

IE11はCSS3アニメーションをサポートしていますが、SVG要素の子ノードではサポートしていません。 SVGノード自体をアニメーション化できるため、私の解決策は、パーツを個別のSVGに分割し、CSS3でアニメーション化することです。

https://codepen.io/getsetbro/full/Bxeyaw/

メタタグを追加すると、IE11が互換モードの場合でも機能します

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
2
getsetbro

これで問題が発生した場合は、回避策があります。

IDとCSSアニメーションを備えた完全なSVGがあり、すべてが他のすべての主要なブラウザーに最適です。

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

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

以上です！

0
Gabiton