web-dev-qa-db-fra.com

L'animation SVG ne fonctionne pas sur IE11

J'ai une animation de chargement très simple qui fonctionne parfaitement sur Firefox et Chrome, mais dans IE11, elle ne montre pas le chiffre SVG.

Voici l'exemple complet: Exemple 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>

L'animation, qui est une rotation, fonctionne sur IE11, mais le SVG, qui est un cercle, n'est pas affiché. 

Une idée?

Je n'arrive pas à comprendre ce qui n'est pas supporté par IE11.

cssinternet-exploreranimationsvgexplorer
23
canute

Seul Microsoft Edge prend en charge les transitions et animations SVG CSS .. en particulier stroke-dasharray. 

Veuillez consulter les documents de développement Microsoft:

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

Permet aux transitions et animations CSS de s’appliquer aux éléments SVG.
Version sans préfixe: Microsoft Edge build 10240+

Comme vous pouvez le voir dans ma fourchette de votre exemple. Vous ne voyiez pas le chargeur tourner parce que l'attribut stroke n'était pas présent dans votre élément circle.

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

Vous pouvez voir comment cela peut tourner maintenant. Mais vous devrez vérifier si le navigateur est IE et ajuster votre stroke-dasharray afin qu'il soit plus gros. Étant donné qu'IE11 et les versions antérieures ne prennent pas en charge l'animation SVG stroke-dasharray et stroke-dashoffset avec une animation ou des transitions CSS, sauf s'il s'agit de Microsoft Edge build 10240+.

Mais si vous avez besoin d’une solution multi-navigateurs pour animer SVG, en particulier stroke-dasharray et stroke-dashoffset. Puis examinez l'utilisation d'une bibliothèque d'animation JS telle que la plate-forme d'animation GreenSock ( GSAP ). Utilisation du DrawSVGPlugin

https://greensock.com/drawSVG

25
Jonathan Marzullo

IE ne prend pas en charge l'animation CSS des éléments SVG. Il ne prend pas non plus en charge les animations SMIL standard intégrées à SVG.

Si vous convertissez votre animation en animations SVG natives, vous pourriez peut-être la faire fonctionner à l’aide de la bibliothèque FakeSmile . Sinon, vous devrez utiliser une solution de remplacement alternative pour IE - telle qu'un gif animé ou autre.

5
Paul LeBeau

IE11 prend en charge les animations CSS3 mais pas sur les nœuds enfants d'un élément SVG. Vous pouvez animer le nœud SVG lui-même; ma solution consiste donc à diviser les parties en différents SVG et à les animer avec CSS3.

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

Cela fonctionnera même si IE11 est en mode de compatibilité si vous ajoutez la balise META.

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

Pour toute personne ayant des problèmes avec cela, j'ai une solution de contournement.

J'avais un fichier SVG complet avec des identifiants et des animations CSS, qui fonctionnaient tous parfaitement pour tous les autres principaux navigateurs.

J'ai inséré mon fichier SVG dans le code HTML afin de pouvoir accéder à tous les éléments avec des animations CSS.

Pour que cela fonctionne, vous devez avoir votre SVG avec la position: 

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

... dans un conteneur .svgcontent (ou comme vous voulez l'appeler)

Script: 

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

Cela prend tous les éléments du tableau objs et les insère comme un SVG complet derrière le premier (vous pouvez changer prepend en append pour changer ce comportement). 

Et le SVG aura le même identifiant que l'objet, donc l'animation CSS va s'appliquer à un SVG complet, pas à un objet SVG.

Et c'est tout!

0
Gabiton