Hintergrundgröße mit SVG in IE9-10 gequetscht

78

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 berücksichtigt. In IE8 wird die SVG 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 das SVG korrekt gerendert. Wenn ich es kleiner mache (dh 100px), beginnt die Grafik zu schrumpfen.

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

Julesfrog
quelle
Gute Frage, das ist oft passiert.
Eirenaios

Antworten:

169

Stellen Sie sicher, dass Ihre SVG eine widthund heightangegeben hat. Wenn Sie es aus Illustrator generieren, stellen Sie sicher, dass das Kontrollkästchen "Responsive" deaktiviert ist, da mit dieser Option Breite und Höhe entfernt werden.

mbxtr
quelle
Ich hatte das gleiche Problem. Also haben wir die SVG mit einem Editor geöffnet. Ebenso wie mbxtr generiert Illustrator SVGs ohne die Eigenschaften width und height im Tag <svg>. Sie können Ihre SVG hier
stephanfriedrich
35
Das hat es auch für mich getan. Ich habe die SVG-Datei in meinem Editor geöffnet und die letzten beiden Werte aus der viewBox-Eigenschaft in die Eigenschaften width und height kopiert / eingefügt. Also vor: <svg viewBox = "0 0 800 150"> und nach: <svg viewBox = "0 0 800 150" width = "800" height = "150">
Tomas Lieberkind
2
Aufgrund meines Problems musste ich die SVG-Code-Werte für Höhe und Breite FWIW entfernen.
Eric Steinborn
2
YMMV Ich denke, das Hinzufügen von Attributen für Breite und Höhe hat bei mir nicht funktioniert. IE10 scheint immer noch nicht zu wissen, was "Cover" bedeutet, es verhält sich wie "Enthalten".
James
1
@gunnx das hat es für mich im IE gelöst, mit einer SVG als Hintergrundbild in einem responsiven Container, wobei die Hintergrundgröße auf 'cover' gesetzt ist.
Matty J
17

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

Simeon Rowsell
quelle
2
Das Hinzufügen preserveAspectRatio="none slice"zum <svg> -Tag im eigentlichen SVG-Dokument hat dieses Problem für mich gelöst! Danke für deinen Vorschlag.
Micah Murray
4

Für mich haben diese 3 Korrekturen geholfen:

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

Ich hatte dieses Problem und stellte fest, dass entweder das Entfernen der Höhe und Breite innerhalb des Codes für das SVG, ABER das Beibehalten der ViewBox das Problem lösen kann.

Ich empfehle die Verwendung einer Compiler-Site wie: https://jakearchibald.github.io/svgomg/ und die Option "viewBox gegenüber Höhe und Breite bevorzugen".

AUCH wenn dies nicht funktioniert, versuchen Sie in Illustrator, einen quadratischen Hintergrund um das SVG-Bild zu legen, aber an den Rändern genügend Polster zu lassen.

Und importieren Sie die SVGs in Ihr Stylesheet mit -> data uri: ... example:

Hintergrundbild: data-uri ('image / svg + xml; Zeichensatz = UTF-8', 'wo / dein / svg / ist / befindet');

Harry Joao
quelle
Das ist eine großartige Website. Danke für den Anteil.
MortenMoulder
wirklich schönes Werkzeug!
Rémy
3

Nun, es sieht nicht so aus, als gäbe es eine Lösung. Überraschung Überraschung. Es ist schließlich IE. Am Ende habe ich 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).

Julesfrog
quelle
2
Was ist der Hack darin? Kannst du bitte Erklären?
Mr_Green
Ich denke, er verwendet verschiedene Symbole für verschiedene Browser. Nicht für jeden geeignet
Hallo Universum
0

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

Wir hatten SVGs in Illustrator CC erstellt, aber sie durch den SVG-Optimierer von Peter Collingridge geführt, um alle unnötigen Cruft zu entfernen. http://petercollingridge.appspot.com/svg-optimiser

Spreu
quelle
0

Ich habe die Lösung von @ mbxtr ausprobiert

Stellen Sie sicher, dass für Ihre 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 Windows Chrome und IE immer noch nicht funktioniert. Ich habe ein Schriftsymbol exportiert. Wenn Sie also eine Schrift haben, stellen Sie sicher, dass Sie sie exportieren als:

  • "Schriftart: In Umrisse konvertieren"
  • und "reaktionsschnell" ist falsch

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

Beatriz Gonzalez
quelle
0

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) direkt zu sich selbst hinzufügen svg-DateierveAspectRatio = "keine" height = "2100"
Maksimov Maksim
quelle
0

Die Größe des SVG-Hintergrundbilds wird unter Verwendung dieser Eigenschaften in IE und Chrome gleich wiedergegeben

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

Ich habe alle meine SVGs so geändert, dass sie in Illustrator nicht mehr reagieren, ohne Erfolg.

Und weil ich nach Codebeispielen suche, habe ich die richtige Antwort verpasst, als ich sagte "Stellen Sie sicher, dass für Ihre SVG eine Breite und Höhe angegeben ist", sie bedeuteten Folgendes:

    .my-class {
        background-size: 200px 100px;
    }

Und wenn die Größe in IE oder Chrome etwas abweicht, habe ich beispielsweise eine Medienabfrage verwendet, um auf den IE abzuzielen:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .my-class {
        background-size: 200px 110px;
    }
}
cfranklin
quelle