web-dev-qa-db-de.com

SVG-Animation funktioniert nicht mit IE11

Ich habe eine wirklich einfache Lade-Animation, die perfekt für Firefox und Chrome funktioniert, aber in IE11 wird keine SVG-Abbildung angezeigt.

Hier ist das vollständige Beispiel: 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>

Die Animation, die eine Rotation ist, arbeitet auf IE11, aber die SVG, ein Kreis, wird nicht angezeigt. 

Irgendeine Idee?

Ich kann einfach nicht herausfinden, was von IE11 nicht unterstützt wird.

23
canute

Nur Microsoft Edge unterstützt SVG-CSS-Übergänge und -Animationen .. insbesondere stroke-dasharray

Bitte beachten Sie die Microsoft-Entwicklerdokumente:

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

Ermöglicht die Anwendung von CSS-Übergängen und -Animationen auf SVG-Elemente.
Unfixierte Version: Microsoft Edge Build 10240+

Wie Sie in meiner Gabel Ihres Beispiels sehen können. Sie haben den Loader-Spin nicht gesehen, weil das stroke-Attribut nicht in Ihrem circle-Element vorhanden ist.

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

Sie können sehen, wie es sich jetzt drehen kann. Sie müssen jedoch prüfen, ob der Browser IE ist, und Ihren stroke-dasharray so anpassen, dass er einen größeren Strich darstellt. Da IE11 und darunter keine Animationen von SVG stroke-dasharray und stroke-dashoffset mit CSS-Animation oder -Übergängen unterstützen, sofern es sich nicht um Microsoft Edge Build 10240+ handelt.

Wenn Sie jedoch eine Cross-Browser-Lösung benötigen, um SVG zu animieren, insbesondere stroke-dasharray und stroke-dashoffset. Dann schauen Sie sich eine JS-Animationsbibliothek wie/ GreenSock Animation Platform ( GSAP ) an. Verwenden des DrawSVGPlugin

https://greensock.com/drawSVG

25

IE unterstützt keine CSS-Animation von SVG-Elementen. Es unterstützt auch nicht die standardmäßig integrierten SMIL-Animationen von SVG.

Wenn Sie Ihre Animation in native SVG-Animationen konvertieren, können Sie sie möglicherweise mithilfe der FakeSmile-Bibliothek zum Laufen bringen. Andernfalls müssen Sie einen alternativen Fallback für IE verwenden, z. B. ein animiertes GIF oder etwas anderes.

5
Paul LeBeau

IE11 unterstützt CSS3-Animationen, jedoch nicht für untergeordnete Knoten eines SVG-Elements. Sie können den SVG-Knoten selbst animieren, so dass meine Lösung darin besteht, die Teile in separate SVGs aufzuteilen und diese mit CSS3 zu animieren.

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

Dies funktioniert sogar, wenn sich IE11 im Kompatibilitätsmodus befindet, wenn Sie das Meta-Tag hinzufügen

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

Für alle, die Probleme haben, gibt es eine Problemumgehung.

Ich hatte eine vollständige SVG-Datei mit IDs und CSS-Animationen, die perfekt für alle anderen großen Browser funktioniert.

Ich habe mein SVG in den HTML-Code eingefügt, sodass ich mit CSS-Animationen auf alle Elemente zugreifen kann.

Damit dies funktioniert, müssen Sie Ihre SVG mit der Position haben: 

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

... in einem Container .svgcontent (oder wie auch immer Sie es nennen wollen)

Skript:

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);        
    });
}

Dabei werden alle Elemente des objs-Arrays übernommen und als vollständige SVG hinter dem ersten eingefügt (Sie können prepend in append ändern, um dieses Verhalten zu ändern). 

Und die SVG wird dieselbe ID haben wie das Objekt. Daher wird die CSS-Animation auf eine vollständige SVG angewendet, nicht auf ein SVG-Objekt.

Und das ist es!

0
Gabiton