Hintergrundgröße mit SVG in IE9-10 gequetscht

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?

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.

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.

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.

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');

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).

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

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 ...

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%"});
  }

2. svg (ursprüngliche Höhe = 1050) direkt zu sich selbst hinzufügen svg-DateierveAspectRatio = "keine" height = "2100"

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;

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