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?
Antworten:
Stellen Sie sicher, dass Ihre SVG eine
width
undheight
angegeben 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.quelle
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.quelle
preserveAspectRatio="none slice"
zum <svg> -Tag im eigentlichen SVG-Dokument hat dieses Problem für mich gelöst! Danke für deinen Vorschlag.Für mich haben diese 3 Korrekturen geholfen:
quelle
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');
quelle
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).
quelle
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
quelle
Ich habe die Lösung von @ mbxtr ausprobiert
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:
Ich habe auch "Minifizieren" deaktiviert, nur für den Fall ...
quelle
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%"}); }
quelle
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;
quelle
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; } }
quelle