wake-up-neo.com

Hintergrundgröße mit SVG in IE9-10 zerquetscht

Ich habe ein Div-Set mit einem Hintergrundbild:

<div>Play Video</div>

mit folgendem CSS:

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;
}

Die Hintergrundgröße wird in Firefox, Safari und Chrome beachtet. In IE8 wird die SVG-Datei durch die PNG-Datei ersetzt. In IE9 und IE10 wird die SVG-Datei jedoch drastisch verkleinert. Das Problem scheint mit der Breite und Höhe des Div verbunden zu sein. Wenn ich eine Höhe von 150px hinzufüge, wird die SVG korrekt gerendert. Wenn ich es kleiner mache (d. H. 100px), beginnt die Grafik zu schrumpfen.

Hat jemand eine Möglichkeit gefunden, dieses Problem im Explorer zu beheben? Gibt es eine Möglichkeit, IE den Hintergrundgrößenwert unabhängig von der Breite und Höhe des Div zu verwenden?

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

Stellen Sie sicher, dass in Ihrer SVG width und height angegeben sind. Wenn Sie es aus Illustrator generieren, stellen Sie sicher, dass das Kontrollkästchen "Responsive" deaktiviert ist, da diese Option Breite und Höhe entfernt.

162
mbxtr

Das Hinzufügen einer Breite und einer Höhe zu der SVG, wie mbxtr sagte, hat für mich fast funktioniert. Ich musste auch preserveAspectRatio="none slice" Hinzufügen, damit es im IE ansprechend funktioniert.

13
Simeon Rowsell

Für mich haben diese 3 Fixes geholfen:

  • Wenn möglich die Hintergrundposition auf "center" setzen
  • Wenn Sie beide Werte für die Hintergrundgröße festlegen, reicht "100% auto" nicht aus. Verwenden Sie "100% 100%".
  • Wenn dies immer noch nicht hilft, ändern Sie das Attribut last to values ​​"viewBox" der SVG selbst und machen Sie es ein Pixel breiter und höher als die Breite und Höhe der SVG. Dies verkleinert die SVG ein wenig, verhindert jedoch, dass IE abgeschnitten wird - und die kleinere Größe wird überhaupt nicht bemerkt.
4
Christian Krammer

Nun, es sieht nicht so aus, als gäbe es eine Lösung. Überraschung Überraschung. Es ist immerhin IE. Ich habe den folgenden Code verwendet:

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;
}

Ich mochte die sauberere Version besser, aber dieser Hack funktioniert in allen modernen Browsern, einschließlich IE8, 9 und 10 (wahrscheinlich 11, aber ich habe nicht getestet).

3
Julesfrog

Ich hatte dieses Problem und stellte fest, dass entweder die Höhe und Breite entfernt wurden. Innerhalb des Codes für das SVG, ABER die ViewBox beizubehalten kann das Problem lösen.

Ich empfehle die Verwendung einer Compiler-Site wie: https://jakearchibald.github.io/svgomg/ und das Setzen der Option auf "viewBox der Höhe und Breite vorziehen"

[~ # ~] auch [~ # ~] Wenn dies nicht funktioniert, versuchen Sie in Illustrator, das SVG-Bild mit einem quadratischen Hintergrund zu versehen, aber genügend Abstand zu lassen an den Rändern.

Und importiere die svg's in dein Stylesheet mit -> data uri: ... Beispiel:

background-image: data-uri ('image/svg + xml; charset = UTF-8', 'wo/dein/svg/sich/befindet');

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 (ursprüngliche Höhe = 1050) fügen Sie direkt zu sich selbst hinzu Svg-Datei preserveAspectRatio = "none" height = "2100"
0
Maksimov Maksim

Wir hatten ein ähnliches Problem mit SVG-Hintergrundbildern, bei denen es sich nicht um die vollständige Position eines enthaltenen Elements handelte (z. B. die Lupe links neben einer Sucheingabe).

Wir hatten SVGs in Illustrator CC erstellt, sie jedoch mit dem SVG-Optimierer von Peter Collingridge ausgeführt, um alle unnötigen Crufts zu entfernen. http://petercollingridge.appspot.com/svg-optimiser

0
Chaffron

Die Svg-Hintergrundbildgröße wird bei IE und Chrome mit diesen Eigenschaften wiedergegeben

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

Ich habe die Lösung von @ mbxtr ausprobiert

Stellen Sie sicher, dass in Ihrem SVG eine Breite und Höhe angegeben ist. Wenn Sie es aus Illustrator generieren, stellen Sie sicher, dass das Kontrollkästchen "Responsive" deaktiviert ist, da diese Option Breite und Höhe entfernt.

Das hat bei mir unter Windows immer noch nicht funktioniert Chrome und IE. Ich habe ein Schriftartensymbol exportiert. Wenn Sie also eine Schriftart haben, stellen Sie sicher, dass Sie sie exportieren als:

  • "font: convert to outlines"
  • und "responsive" ist falsch

Ich habe auch "Minifizieren" deaktiviert, nur für den Fall ...

0
Beatriz Gonzalez