5568 sujets

Sémantique web et HTML

Comment animer un path SVG avec IE11

Bonjour,

Je ne parviens pas à dessiner une ligne en SVG avec une animation CSS avec IE11 (alors que cela fonctionne avec Edge, Firefox et Chrome).
Est-ce qu'il faut forcément utiliser du JavaScript avec IE11 ? Si oui, quel est le type de fonction ?

#svg_5{
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: dash5 2s  infinite;
}
 
@keyframes dash5 {
  to {
    stroke-dashoffset: 0;
     }
}



<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <path d="m25.31261,164.29732c55.56496,-52.60342 103.00883,-52.44184 167.4407,-9.47015c64.43166,42.97148 136.394,-28.31529 137.87154,-31.47906" stroke-width="4" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="#fff" opacity="0.5" id="svg_5"/>
</svg>



Merci de votre aide
Modérateur
Cela ne fonctionne pas dans IE11 et inferieur.

Si il y a peut-être des manières de contourner le problème à grand coups de JavaScript ou de CANVAS , ici, pour une simple ligne, une animation sur la largeur d'un conteneur peut faire l'affaire à moindre coûts:

https://codepen.io/anon/pen/MXRRXp

<div class="ie11">
  <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <path d="m25.31261,164.29732c55.56496,-52.60342 103.00883,-52.44184 167.4407,-9.47015c64.43166,42.97148 136.394,-28.31529 137.87154,-31.47906" stroke-width="4" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="#fff" opacity="0.5" id="svg_5"/>
</svg>
</div>


.ie11{
 display:inline-block;/* ou pas */
  max-width:0;
  overflow:hidden;
  animation: dash5 2s  infinite;
}
 
@keyframes dash5 {
  to {
    max-width: 400px;
     }
Merci à vous 2 pour vos réponses.

Donc si le tracé est plus élaboré (comme un cercle par exemple) ou si on a besoin d'utiliser stroke-dasharray et stroke-dashoffset pour l'animation, il faut détecter le navigateur et afficher autre chose si c'est IE (comme une image fixe ou un GIF), c'est bien ça ?
Sujet clos
Aller à