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

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.

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 .

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

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

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

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.

In meinem Fall hat das folgende Attribut funktioniert

preserveAspectRatio="xMinYMin"

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

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.