Die Position des SVG-Hintergrundbilds wird im Internet Explorer trotz der Hintergrundposition immer zentriert: linke Mitte;

73

Ich verwende ein SVG-Logo als Hintergrundbild und kann es im Internet Explorer (Bearbeiten: und Safari) scheinbar nicht richtig nach links ausrichten .

Die Behälter sehen so aus:

<div id="header">
    <div id="logo"></div>
</div>

Mit den Stilen:

#header{
    width: 100%;
    max-width: 1200px; 
    height: 100%;}

#logo{
    background: url(../images/ss_logo.svg);
    background-position: left center;
    width: 100%;
    height: 100%;
    float: left;}

Sie können sehen, dass das <div>Logo 100% des übergeordneten Elements umfassen sollte, das Logo jedoch links vom Element angezeigt wird. Dies funktioniert gut in Chrome und Safari, aber das Logo wird immer <div id="logo">im IE zentriert .

Informationen scheinen wirklich schwer zu finden zu sein. Hat jemand das gleiche Problem gehabt?

Hier ist ein Link zu einer Beispielversion des Problems . Das grüne Kästchen ist die SVG.

html css svg Bluefantail
quelle
1
Können Sie ein Live-Beispiel für dieses Verhalten verknüpfen?
Niels Keurentjes
Dieses Problem in IE 10 zu bekommen, aber auch in Safari bemerkt, dass es dasselbe ist.
Bluefantail
magma.acidic.co.nz/sites/example
bluefantail
1
Hinzufügen background-size:hat bei mir funktioniert.
Davey
4
CSS background-sizehat auch für mich funktioniert, aber im Gegensatz zu Chrome / FF / Safari kann der IE keinen einzelnen Wert verarbeiten, um ein Seitenverhältnis mit automatischer Höhenerhaltung zu implizieren. Verwenden Sie background-size: 13px 13pxstattdessen anstelle von , um ein quadratisches SVG mit 13 x 13 Pixel zu rendern background-size: 13px.
Ben Hutchison

Antworten:

154

Das Problem liegt nicht bei Ihrem CSS, sondern bei Ihrer SVG. Das SVG wird vergrößert, um den gesamten Hintergrund des Elementfelds zu füllen (wie erwartet). Wie Ihre SVG-Skala dann zum Kontrollfaktor wird:

Legen Sie ein viewBox="0 0 width height"(in Pixel) Attribut für Ihr <svg>Element fest und entfernen Sie dessen widthund heightAttribute. Sie müssen auch preserveAspectRatio="xMinYMid"das svg Element festlegen (x / vertikal linksbündig, y / horizontal mittig ausgerichtet) . Dies funktioniert zumindest mit Internet Explorer 10 und 11.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

Erfahren Sie mehr über die preserveAspectRatio und viewBox Attribute. Quelle: „Erste Schritte mit SVG“ im IEblog .

Aeyoun
quelle
1
Was ich daraus mache [ developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… ist, dass man die Hintergrundposition nicht mit CSS einstellen kann & das muss in der SVG selbst gemacht werden. Ist das richtig? Wenn ja, ist das nur verdammt unpraktisch. Gibt es sowieso um das herum?
Crystal Miller
1
Es ist ein bisschen mühsam, das SVG bearbeiten zu müssen, um die richtige Positionierung zu erreichen, aber das ist kein großes Problem, wenn Sie erst einmal wissen, was Weizen zu tun hat. Ich fand dieses hervorragende Tutorial darauf: tutorials.jenkov.com/svg/svg-viewport-view-box.html
Colin James Firth
6
Danke dafür! In meinem Fall brauchte ich xMinYMin. Aber genau richtig!
Jeremy Carlson
2
Wenn Sie wie ich sind und Ihre SVGs in Illustrator bearbeiten und speichern, deaktivieren Sie das Kontrollkästchen "Responsive" in den erweiterten Optionen im Dialogfeld "Speichern".
Dennis Best
2
Fabelhafte Antwort wirklich zu schätzen! Für mich war die Viewbox bereits eingestellt, aber daserveAspectRatio hat es behoben.
Ukuser32
18

In meinem Fall löste das Hinzufügen von "width" & "height" -Werten die Probleme auf ie9-11.

Marcus Mori Morba
quelle
1
Für mich mussten sowohl Breite als auch Höhe als Pixelwerte eingestellt werden (ohne "Auto").
David Jones
Gleiches hat mein Problem behoben
Eric Cicero
14

Wenn wir die Hintergrundgröße angeben, funktioniert dies im IE

Unten ist der Beispielcode

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
Thomas Mathew
quelle
Das hat bei mir funktioniert. In meinem Fall Hinzufügen der festen Hintergrundgröße (ohne Auto).
Vasilii Burlacu
14

Die akzeptierte Antwort funktioniert, aber hier ist eine andere Lösung.

Das Einfügen der Dimensionen in die SVG-Datei, damit sie mit den Viewbox-Dimensionen identisch sind, reicht ebenfalls aus. 

width="496px" height="146px" viewBox="0 0 496 146"

Wenn Sie wie ich sind und Ihre SVGs in Illustrator bearbeiten / speichern, deaktivieren Sie das Kontrollkästchen "Responsive" in den erweiterten Optionen im Dialogfeld "Speichern". Dann werden die Abmessungen einbezogen.

(Da es skalierbar ist, reagiert es per Definition "ansprechend". Diese Einstellung scheint also etwas redundant zu sein.)

Dennis Best
quelle
1
Ich habe die gleiche Lösung gefunden. Auch Chrom zeigt die genaue Größe.
Roman Losev
6

Wenn IE 8-11 ein SVG in einem Hintergrund ohne Wiederholung platziert, werden die linke und rechte Seite automatisch ausgeglichen, um sie an die Passform anzupassen. Dies erzeugt einen Zentrierungseffekt des Bildes auf Bildebene. Bedeutung: Es erweitert den Leerraum auf beiden Seiten des Bildes, um den Container zu füllen.

Das neue Bild entspricht dann 100% der Breite seines Elements. Aus diesem Grund hat position: left keine Auswirkung, es ist bereits links mit Polsterung enthalten.

Der Container des Hintergrundelements muss eingeschränkt werden, um ein Überdehnen (durch Shimmen) zu verhindern. Zum Beispiel: max-width

div#logo{
    background-image: url(/img/logo.svg) no-repeat;
    max-width: 140px;
    margin: 0 auto auto 0;
}

Das Bild wird weiterhin innerhalb der 140px zentriert, aber es schwebt nicht mehr über diesen Punkt hinaus.

ppostma1
quelle
1

In meinem Fall hat das folgende Attribut funktioniert

preserveAspectRatio="xMinYMin"

Tal
quelle
-2

Lösung: Versuchen Sie es mit einer anderen .svg, hier ein Beispielkopf:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve">
Rechtsamwald
quelle
-4

Es stellt sich heraus, dass die folgende Zeile Ihre SVG in ein nicht zentriertes Element verwandeln kann:

display: inline-block;

Immer noch nicht die idealste Lösung, aber es funktioniert.

Habib Khan
quelle
Die Anzeigeeigenschaft eines Elements hat nichts mit seiner Hintergrundeigenschaft zu tun. Ich würde gerne die Quellen sehen, die Sie dazu gebracht haben, etwas anderes zu glauben.
Crystal Miller
Was in Habibs Fall passiert, ist, dass sich die Breite von 100% auf die Breite des Inhalts ändert, wenn er die Anzeigeeigenschaft des Containers in Inline-Block ändert. Wenn der Container also sehr breit war und jetzt schmal geworden ist, sieht das Bild möglicherweise so aus, als wäre es nicht mehr zentriert. Wie @CrystalMiller jedoch betont, ist dies nicht der Fall.
Adam Pearlman