Problème animation SVG et IE

Bonjour !

J'ai réaliser un logo animé qui fonctionne très bien sous FireFox et Chrome.
Mais comme vous le savez, le dernier de la classe, j'ai nommé IE, lui ne veux rien savoir

D'où ma question : comment faire pour converser mon animation là où les navigateurs la comprenne, et la remplacer par une simple <img> pour ceux qui ne sont pas capable de la lire ?

Ainsi, l'animation sera jouée dans certain navigateurs, et dans d'autres il y aura juste l'image du logo.

Merci par avance !

Bonjour.

La balise HTML picture semble convenir pour faire ce que vous voulez...

Zelena a écrit :

La balise HTML picture semble convenir pour faire ce que vous voulez...

elle n'est pas supportée par IE non plus…

@caro95

Cela dépend de comment est animé le logo.

Il existe plusieurs solutions => rendre l'animation compatible IE, avoir une dégradation gracieuse, ou implémenter des tests via des solutions telles que Modernizr
On pourrait mieux aider en en sachant plus sur cette animation.

Alors il s'agit d'une texte qui s’écrit au fur et à mesure avec la technique des "long pointillés".

J'utilise pour cela les fonctions css : stroke-linecap / stroke-dasharray / stroke-dashoffset, les keyframes et les "animation" renvoyant au keyframe

(par exemple pour un élément "chose" html, ça donne :
@keyframes texte {
to {stroke-dashoffset: 0;}
}
.chose {
stroke : #000;
stroke-width: 2px;
fill: none;
stroke-linecap: round butt;
stroke-linejoin: round;
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: texte .3s 1s linear forwards;}

)
Souhaitez-vous voir l'intégralité de mon code?

kustolovic a écrit :

elle n'est pas supportée par IE non plus...

Néanmoins, lorsque je l'essaye avec Internet Explorer 11, l'image avec la balise <img> incluse dans <picture> apparait...

Bonjour

Je relance ce post ayant bataillé pendant 2 jours à essayer de trouver un Polyfill adapté sans succès. En fait j'ai remarquer que ce n'est pas le SVG qu'Internet Explorer 11 (et Safari aussi au passage) ne comprend pas, mais les animation SMIL qui y sont associées.

De plus, je n'ai pas très bien compris la réponse concernant la balise <picture>
Pouvez-vous préciser comment l'utiliser?

Je recherche donc une solution pour :
- soit que mon animation soit comprise par IE et Safari
- soit remplacer le svg animé par un simple logo SEULEMENT sur ces 2 navigateurs

Merci par avance de votre aide !

Bonjour, alors picture n'aidera pas dans ton cas de toute façon.

tu peux détecter le support de SMIL grâce à modernizr (et donc remplacer le logo, soit par js soit par CSS)

Sinon SMIL a été déprécié par Chrome et pourrait être retiré dans de futures versions, il n'y en gros qu'avec Firefox que le support reste sur moyen/long terme. IE/Edge ne l'implémenteront pas.