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é:
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:
J’ai aussi décoché “minify” au cas où …
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%"}); }