Taille d’arrière-plan avec SVG écrasé dans IE9-10

J’ai un jeu de div avec une image de fond:

Play Video

avec le CSS suivant:

 div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150px; } 

La taille de l’arrière-plan est respectée dans Firefox, Safari et Chrome. Dans IE8, le fichier SVG est remplacé par le fichier PNG. Cependant, dans IE9 et IE10, le fichier SVG est considérablement dimensionné. Le problème semble être lié à la largeur et à la hauteur du div. Si j’ajoute une hauteur de 150px, le SVG est correctement rendu. Si je le rends plus petit (par exemple 100px), le graphique commence à diminuer.

Quelqu’un at-il trouvé un moyen de résoudre ce problème dans l’Explorateur? Est-il possible de dire à IE d’utiliser la valeur de taille d’arrière-plan indépendamment de la largeur et de la hauteur du div?

Assurez-vous que votre SVG a une width et une height spécifiées. Si vous le générez à partir d’Illustrator, assurez-vous que la case “Responsive” n’est pas cochée, car cette option supprime la largeur et la hauteur.

L’ajout d’une largeur et d’une hauteur au SVG comme l’a dit mbxtr a presque fonctionné pour moi. Je devais aussi append preserveAspectRatio="none slice" pour le faire fonctionner dans IE.

Eh bien, il ne semble pas y avoir de solution. Surprise Surprise. C’est IE après tout. J’ai fini par utiliser le code suivant:

 div { padding: 20px; width: 150px; position: relative; } div:after { position: absolute; content: ""; width: 40px; height: 40px; top: 50%; right: 30px; margin-top: -20px; background-image: url('icon.png'); background-image: url('icon.svg'), none; } 

J’ai aimé la version plus propre, mais ce hack fonctionne dans tous les navigateurs modernes, y compris IE8, 9 et 10 (probablement 11 mais je n’ai pas testé).

Pour moi, ces 3 corrections ont aidé:

  • Si possible, définissez la position d’arrière-plan sur “center”
  • Pour les deux valeurs d’arrière-plan, “100% auto” ne fera pas l’affaire, utilisez donc “100% 100%”
  • Si cela ne permet toujours pas de modifier le dernier atsortingbut “viewBox” de l’atsortingbut SVG lui-même et de le rendre d’un pixel plus large et plus haut que la largeur et la hauteur du SVG. Cela réduit un peu le SVG, mais empêche IE de le couper – et la plus petite taille ne sera pas remarquée du tout.

J’ai eu ce problème et j’ai trouvé que soit supprimer la hauteur et la largeur à l’intérieur du code pour svg BUT garder le viewBox peut résoudre le problème.

Je recommande d’utiliser un site de compilation tel que: https://jakearchibald.github.io/svgomg/ et de définir l’option “prefer viewBox over height and width”

Également, si rien ne fonctionne, dans Illustrator, essayez d’appliquer un arrière-plan carré autour de l’image svg, mais en laissant suffisamment de marge sur les bords.

Et importez les svg dans votre feuille de style en utilisant -> data uri: … exemple:

background-image: data-uri (‘image / svg + xml; charset = UTF-8’, ‘où / votre / svg / is / located’);

Nous avons eu un problème similaire avec les images d’arrière-plan SVG qui n’étaient pas le site complet d’un élément contenant (comme la loupe à gauche d’une entrée de recherche).

Nous avions créé des SVG dans Illustrator CC, mais leur exécution via l’optimiseur SVG de Peter Collingridge pour éliminer tout le travail inutile a fait l’affaire. http://petercollingridge.appspot.com/svg-optimiser

J’ai essayé la solution @ mbxtr

Assurez-vous que votre SVG a une largeur et une hauteur spécifiées. Si vous le générez à partir d’Illustrator, assurez-vous que la case “Responsive” n’est pas cochée, car cette option supprime la largeur et la hauteur.

Cela n’a toujours pas fonctionné pour moi sur Windows Chrome et IE. J’exportais une icône de police, donc si vous avez une police, assurez-vous de l’exporter comme suit:

  • “font: convert to outlines”
  • et “responsive” est faux

J’ai aussi décoché “minify” au cas où …

1. javascript

  drips.style.top = -dripsTop + "px"; var browser = window.navigator.userAgent; if (browser.indexOf("Trident") > 0) { $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"}); } 

  1. svg (hauteur d’origine = 1050) append directement à lui le fichier svg preserveAspectRatio = “none” height = “2100”