Animacja SVG nie działa na IE11

Mam naprawdę prostą animację ładującą, która działa doskonale w Firefoksie i Chrome, ale w IE11 nie pokazuje postaci SVG.Animacja SVG nie działa na IE11

Oto pełny przykład: 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>

animację, która jest obrotowa, pracuje nad IE11, ale SVG, który jest koło, nie będąc wystawiany.

Każdy pomysł?

Po prostu nie mogę zrozumieć, co nie jest obsługiwane przez IE11.

Źródło

2015-11-19 canute

Która wersja IE? –

Testuję je na eksploratorze 11 – canute

Będziesz musiał zdefiniować atrybut obrysu dla koloru, który zobaczysz w IE. Ale myślę, że będziesz musiał użyć indywidualnych właściwości animacji CSS zamiast skróconej własności 'animacji' CSS. Możesz zobaczyć tutaj: http://jsfiddle.net/z8w4vuau/50/ .. jak dodałem atrybut 'stroke' dla koloru na elemencie' .loader-path' 'circle' i zwiększyłem' stroke-dasharray' więc widzisz, że się kręci, ale IE nie animuje twojego 'stroke-dasharray' i' stroke-dashoffset'. Więc po prostu użyj właściwości animacji CSS o długim kształcie. –

IE nie obsługuje animacji CSS elementów SVG. Nie obsługuje również standardowych wbudowanych animacji SMIL, które ma SVG.

Jeśli przekształcisz animację w natywne animacje SVG, możliwe, że działa ona przy użyciu FakeSmile library. W przeciwnym razie będziesz musiał użyć alternatywnego mechanizmu zastępczego dla IE - takiego jak animowany gif lub coś podobnego.

Źródło

2015-11-20 03:33:48

Jak by ten fallback wyglądał jak kod CSS? – nerdess

Tylko Microsoft Edge będzie obsługiwał przejścia i animacje SVG CSS, zwłaszcza stroke-dasharray.

proszę zobaczyć Dokumenty Microsoft Developer:

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

Pozwala CSS Transitions i animacji do zastosowania do elementów SVG.
wersja bez prefiksu: Microsoft Edge budować 10240+

Jak widać w moim rozwidleniu swoim przykładzie. Nie widzisz rotacji programu ładującego, ponieważ nie masz atrybutu stroke na swoim elemencie circle.

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

Można zobaczyć, jak można kręcić teraz. Ale będziesz musiał sprawdzić, czy przeglądarka jest IE i dostosować swój stroke-dasharray, więc jest większy kreska. Ponieważ IE11 i poniżej nie obsługują animacji SVG stroke-dasharray i stroke-dashoffset z animacjami lub przejściami CSS, chyba że jest to wersja 10240+ Microsoft Edge.

Ale jeśli potrzebujesz rozwiązania opartego na przeglądarce, aby animować SVG, szczególnie stroke-dasharray i stroke-dashoffset. Następnie zajrzyj do biblioteki animacji JS, takiej jak GreenSock Animation Platform (GSAP). Korzystanie z DrawSVGPlugin

https://greensock.com/drawSVG

Źródło

2015-11-20 13:59:40

Patrząc na to w Edge (20.10240.16384.0) nie działa w ogóle. Usunąłem wszystko, co nie jest wymagane z skrzypiec, aby łatwiej było je zobaczyć: http://jsfiddle.net/z8w4vuau/55/ –

Firma Microsoft twierdzi, że obsługuje animacje CSS w stroke-dasharray na stronie odniesienia dla strony stroke-dasharray https://msdn.microsoft.com/en-us/library/ff972274(v=vs.85).aspx .. Ale to jest IE, więc oczekiwane jest zachowanie błędne lub niepracujące dla przejść css i animacji css .. może być błąd przeglądarki? Ale czy próbowałeś zajrzeć do rozwiązania JS, takiego jak GSS DrawSVGPlugin GreenSock? Sprawdź przykład na tej stronie w IE Edge .. http://greensock.com/drawSVG –

Jestem na diecie JS-biblioteka, że tak powiem :) Ale jestem świadomy, że mógłbym zrobić to za pomocą javascript. Jednak to nie jest tak ważne, więc po prostu wykrywam i wyłączam te animacje w IE/Edge, dopóki to nie zostanie naprawione. –

Dla każdego kłopoty z tym, mam obejścia.

Miałem pełną SVG z identyfikatorami i animacjami CSS, wszystko działa idealnie dla wszystkich innych głównych przeglądarek.

Mam mój SVG włożony do HTML, więc mogę uzyskać dostęp do każdego elementu z animacjami CSS.

Aby to działało, trzeba mieć swój SVG z pozycji:

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

... wewnątrz kontenera .svgcontent (lub cokolwiek chcesz to nazwać)

Scenariusz:

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

to ma wszystkie elementy w tablicy objs oraz wstawić je w pełnym SVG za t on pierwszy (można zmienić prepend na append, aby zmienić to zachowanie).

I SVG będzie miał ten sam identyfikator co obiekt, więc animacja CSS będzie dotyczyć pełnego SVG, a nie obiektu SVG.

I to wszystko!

Źródło

2017-08-31 13:40:59 Gabiton

Czy możesz podać działający [jsFiddle] (https://jsfiddle.net/), który pokazuje, że działa to w IE? –

Animacja SVG nie działa na IE11

Odpowiedz

Powiązane problemy