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
Libérer: 2024-12-31 20:30:15
original
997 Les gens l'ont consulté

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%;
}
Copier après la connexion

HTML :

<div>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal