Pourquoi mes fichiers SVG ne sont-ils pas correctement mis à l'échelle dans Internet Explorer et comment puis-je y remédier ?

Les SVG ne sont pas correctement mis à l'échelle dans IE

Pourquoi cela se produit-il ?

IE a un bug connu qui l'empêche de mettre à l'échelle correctement les SVG si les deux la largeur et la hauteur ne sont pas explicitement spécifiées.

Comment y remédier ?

Pour résoudre ce problème dans IE, une astuce découverte par Nicolas Gallagher peut être utilisée. Cette technique utilise un élément, que IE met à l’échelle correctement. En plaçant un avec le même rapport hauteur/largeur que le SVG dans le format <div> contenant le SVG, il force le SVG à s'afficher à la bonne taille.

Implémentation

Voici le code mis à jour avec le astuce :

<div>

Style personnalisé

Pour positionner correctement les éléments, ajoutez le CSS suivant :

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Avec ces ajustements, le SVG devrait être correctement mis à l'échelle dans Internet Explorateur.

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!