web-dev-qa-db-fra.com

SVG dans les proportions des éléments img non respectées dans ie9

CSS:

img{
    max-height:30px;
}

HTML:

<img src="foo.svg" />

Je recherche cette image svg à l’échelle proportionnelle à une hauteur maximale de 30 pixels. Les dimensions naturelles du svg sont 200px par 200px. Fonctionne très bien dans FF et Chrome (30x30), mais dans IE9, l’image est de 30x200. Maintenant voici le kicker. Cela ne se produit qu'avec certains fichiers SVG, d'autres svgs sont correctement mis à l'échelle.

Il semble que la différence est que l'un est constitué de polygones et l'autre de chemins.

n'échelle pas correctement:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

est-il correctement mis à l'échelle?

http://www.radiantinteractive.com/rs/images/allies/technologyLogos/groovy.svg

aucune idée sur pourquoi cela se produit, ou comment je peux obtenir le premier à l’échelle proportionnelle dans ie9?

csssvginternet-explorer-9
40
Fresheyeball

Pour obtenir une mise à l'échelle plus cohérente entre les navigateurs, veillez à toujours spécifier une variable viewBox tout en laissant les attributs width et height de votre élément svg. J'ai créé une page de test pour comparer l'effet de la spécification des différents attributs SVG en combinaison avec les largeurs et les hauteurs spécifiées dans CSS. Comparez-le côte à côte dans différents navigateurs et vous verrez beaucoup de différences dans la gestion.

111
robertc

Pour le réparer dans ie9 et ne pas s'en tenir à cela. Je ne sais pas pourquoi, mais vous devriez définir width: 100% via css-rule, mais pas dans img-tag. Le rapport hauteur/largeur fonctionnera par magie)) Cela m'a aidé, espérons que ce post aidera d'autres. 

21
Able

Vous pouvez aussi regarder ici: https://Gist.github.com/larrybotha/7881691 - c'est la suite de cette "histoire".

Correction de SVG dans les balises <img> non mises à l'échelle dans IE9, IE10, IE11

IE9, IE10 et IE11 ne modifient pas correctement les fichiers SVG ajoutés aux balises img lorsque les attributs viewBox, width et height sont spécifiés. Voir ce codepen sur les différents navigateurs.

Les hauteurs d'image ne seront pas mises à l'échelle lorsque les images sont à l'intérieur de conteneurs plus étroits que leurs largeurs Cela peut être résolu de 2 manières.

Utilisez sed dans bash pour supprimer les attributs de largeur et de hauteur dans les fichiers SVG

Selon cette réponse sur Stackoverflow , le problème peut être résolu en supprimant uniquement les attributs width et height.

Ce petit script va rechercher récursivement dans votre répertoire de travail actuel des fichiers SVG et supprimer les attributs pour la compatibilité entre navigateurs:

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

Mises en garde

La suppression des attributs de largeur et de hauteur obligera l'image à occuper toute la largeur de son conteneur dans les navigateurs autres qu'IE.

IE10 (les autres navigateurs nécessitent des tests) réduira la taille des images à une taille quelconque, ce qui signifie que vous devrez ajouter width: 100% à votre CSS pour que ces images s'adaptent à leurs conteneurs.

Cible IE avec CSS

Comme la solution ci-dessus nécessite de toute façon CSS, nous pourrions aussi bien utiliser un hack pour que IE se comporte, et ne pas nous inquiéter d'avoir à gérer chaque fichier SVG individuel.

Les éléments suivants cibleront toutes les balises img contenant un fichier SVG, dans IE6 + (toutefois, seuls les fichiers SVG supportant IE9 + sont compatibles).

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

Mises en garde

Cela cible toutes les balises img contenant ".svg" dans IE9, IE10 et IE11. Si vous ne souhaitez pas ce comportement sur une image particulière, vous devrez ajouter une classe pour le remplacer pour cette image.

9
Martenti

J'ai passé (semaines} _ à essayer toutes sortes de solutions pour pouvoir utiliser les SVG dans un site Web de taille adaptable qui fonctionne pour les principaux navigateurs modernes.

Les fichiers SVG doivent être mis à l'échelle à l'aide de pourcentages CSS et inclure des images bitmap intégrées.

La solution seulement que j'ai trouvée pour le redimensionnement en pourcentage dans IE consiste à incorporer des SVG externes dans une balise <object>.

Il existe différentes solutions pour redimensionner les SVG dans IE en tailles de pixels strictes, mais aucune d'entre elles ne fonctionne pour le redimensionnement en pourcentage.

J'ai créé une suite de tests non exhaustive ici .

1
Andrew Swift

D'une manière ou d'une autre, ce problème a résolu mon problème.

ul {
  li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    img {
      height: 20px;
      margin: 0 10px;
      display: inline-block;
    }
  }
}

En fait, je faisais une liste centrée de logos pour mon pied de page et je rencontrais des problèmes de largeur. Normalement, je crée un bloc en ligne avec un élément de bloc à l'intérieur. Créer un élément en ligne avec un élément inline-block a fonctionné pour moi. Ceci est une implémentation spécifique pour laquelle le bogue s'est avéré pour moi et ne résout pas tous les bogues, mais j'espère que cela aidera quelqu'un à lire ceci.

0
Brandon Buttars