Maison >interface Web >tutoriel CSS >Pourquoi mes fichiers SVG ne sont-ils pas mis à l'échelle correctement dans Internet Explorer ?

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

DDD
DDDoriginal
2024-12-31 20:30:151018parcourir

Why Are My SVGs Not Scaling Correctly in Internet Explorer?

Les SVG ne parviennent pas à être mis à l'échelle correctement dans IE en raison d'un manque de largeur et de hauteur

Dans cette question, l'utilisateur a rencontré des problèmes de mise à l'échelle avec les SVG dans Internet Explorer. L'erreur provenait de l'absence d'attributs explicites de largeur et de hauteur dans les SVG.

Solution : fournir des attributs de largeur et de hauteur

Pour résoudre le problème, l'utilisateur a utilisé un technique découverte par Nicolas Gallagher, qui consiste à utiliser une pour fournir le rapport hauteur/largeur nécessaire pour le SVG.

Mise en œuvre :

  1. Ajouter un au HTML, avec ses attributs width et height définis pour correspondre à la taille du SVG.
  2. Masquer l'élément en utilisant CSS en définissant sa visibilité sur caché.
  3. Positionnez le SVG absolument dans le <div> en utilisant CSS.

CSS :

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

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

HTML :

<div>

En implémentant cette solution de contournement , l'utilisateur a résolu avec succès le problème de mise à l'échelle dans Internet Explorer, permettant aux SVG de s'afficher correctement.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn