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 <div> contenant le SVG.
2. Créez le invisible avec visibilité : caché.
3. Positionnez le SVG absolument dans le <div> et définissez sa largeur à 100%.

Code :

<div>

CSS :

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!