web-dev-qa-db-fra.com

Taille du fond avec SVG écrasé dans IE9-10

J'ai un ensemble avec une image de fond:

<div>Play Video</div>

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 réduit. Le problème semble être lié à la largeur et à la hauteur de la div. Si j'ajoute une hauteur de 150 pixels, le fichier SVG est correctement rendu. Si je le réduit (c.-à-d. 100 pixels), le graphique commence à se réduire.

Quelqu'un at-il trouvé un moyen de résoudre ce problème dans Explorer? Y a-t-il un moyen de dire IE d'utiliser la valeur background-size indépendamment de la largeur et de la hauteur du div?

csssvginternet-explorer-9internet-explorer-10background-size
73
Julesfrog

Assurez-vous que votre fichier SVG a une spécification width et height. Si vous le générez à partir d'Illustrator, assurez-vous que la case "Réactif" est décochée, car cette option supprime la largeur et la hauteur.

162
mbxtr

Ajouter une largeur et une hauteur au SVG, comme mbxtr l’a dit, a presque fonctionné pour moi. J'avais besoin d'ajouter preserveAspectRatio="none slice" ainsi que pour le faire fonctionner correctement dans IE.

13
Simeon Rowsell

Pour moi, ces 3 corrections ont aidé:

  • Si possible, réglez la position de fond sur "centre"
  • Pour la taille de l’arrière-plan, définissez les deux valeurs, "100% auto" ne vous convient pas, utilisez donc "100% 100%".
  • Si cela ne vous aide toujours pas, modifiez le dernier attribut en valeurs "viewBox" du SVG lui-même et rendez-le 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.
4
Christian Krammer

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'aimais mieux 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é).

3
Julesfrog

J'ai eu ce problème et j'ai constaté que soit en supprimant la hauteur et largeur à l'intérieur du code pour le svg MAIS garder la viewBox peut résoudre le problème.

Je recommande d'utiliser un site de compilateur tel que: https://jakearchibald.github.io/svgomg/ et en définissant l'option sur "préfère l'affichage par la hauteur et la largeur"

[~ # ~] également [~ # ~] si cela ne fonctionne pas, dans Illustrator, appliquez un fond carré autour de l'image svg en laissant suffisamment de remplissage. sur les bords.

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

image d'arrière-plan: data-uri ('image/svg + xml; charset = UTF-8', 'où/votre/svg/est/localisé');

2
Harry Joao

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) ajoute directement à lui-même fichier svg preserveAspectRatio = "none" height = "2100"
0
Maksimov Maksim

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 (tel que la loupe située à gauche d'une entrée de recherche).

Nous avions créé des SVG dans Illustrator CC, mais nous les avions exécutés avec l'optimiseur SVG de Peter Collingridge pour éliminer tout le superflu inutile. http://petercollingridge.appspot.com/svg-optimiser

0
Chaffron

La taille de l'image d'arrière-plan Svg sera la même chose le IE et Chrome en utilisant ces propriétés

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
0
Super Model

J'ai essayé la solution de @ 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 "Réactif" est décochée, car cette option supprime la largeur et la hauteur.

Cela ne fonctionnait toujours pas pour moi sous windows Chrome et IE. J'exportais une icône de police. Par conséquent, si vous avez une police, assurez-vous de l'exporter sous le format:

  • "police: convertir en contours"
  • et "responsive" est false

J'ai aussi décoché "minify" juste au cas où ...

0
Beatriz Gonzalez