Pourquoi mes SVG ne sont-ils pas mis à l'échelle correctement dans Internet Explorer ?

Les SVG ne s'adaptent pas correctement dans IE - ont un espace supplémentaire

Problème : Lors de l'utilisation de symboles SVG pour la réactivité, le Les SVG ne s'adaptent pas correctement dans Internet Explorer (IE).

Réponse : IE a un bug qui empêche les SVG de se mettre à l'échelle correctement à moins que la largeur et la hauteur ne soient spécifiées.

Solution :

Utilisez une astuce découverte par Nicolas Gallagher :

1. Ajoutez un avec le même rapport hauteur/largeur que le SVG vers l'élément
   contenant le SVG.
2. Créez le invisible avec visibilité : caché.
3. Positionnez le SVG absolument dans le
   et définissez sa largeur à 100%.

   Code :

   <div>
   <p><strong>CSS :</strong></p>
   <pre class="brush:php;toolbar:false">canvas {
       display: block;
       width: 100%;
       visibility: hidden;
   }
   
   svg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
   }

   Remarque : Cette astuce force IE à mettre à l'échelle le SVG correctement en utilisant le comme référence.