Warum funktioniert meine SVG-Animation in IE11 nicht?

SVG-Animation wird in IE11 nicht angezeigt

Im Zusammenhang mit der Tatsache, dass SVG-Animationen in IE11 nicht funktionieren, ergibt sich ein grundlegendes Problem aus der Browserkompatibilität. Microsoft Edge ist der einzige Browser, der SVG-CSS-Übergänge und -Animationen unterstützt, insbesondere solche mit Stroke-Dasharray.

IE11-Inkompatibilität

Wie in den Microsoft Developer Docs beschrieben, ist dies bei IE11 der Fall Unterstützt keine CSS-Übergänge und Animationen für SVG-Elemente. Insbesondere fehlt die Unterstützung für die Animation von Stroke-Dasharray und Stroke-Dashoffset. Daher wird der SVG-Kreis im IE11 nicht angezeigt.

Lösung für IE11

Um die Kompatibilität mit IE11 sicherzustellen, muss überprüft werden, ob der Browser IE ist und passen Sie das Stroke-Dasharray entsprechend an. Diese Lösung ist jedoch nicht ideal, da sie Browser-Sniffing erfordert.

Browserübergreifende Lösung

Für eine browserübergreifende Lösung sollten Sie die Verwendung einer JS-Animationsbibliothek wie GreenSock in Betracht ziehen Animationsplattform (GSAP) mit dem DrawSVGPlugin. Dieses Plugin bietet Unterstützung für die Animation von SVG-Elementen, einschließlich Stroke-Dasharray und Stroke-Dashoffset, in allen gängigen Browsern.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine SVG-Animation in IE11 nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!