IE11 mit Svg als Hintergrundbild schlägt fehl
Ich stehe vor einem seltsamen Problem mit Internet Explorer 11 auf Windows 10-Rechner. Wenn Sie ein SVG-Bild als Hintergrund verwenden, das völlig schwarz erscheint, funktioniert Edge mit demselben Code einwandfrei.
Hier eine kleine Geige, die mein Problem reproduziert
Damit macht Edge das SVG zu Recht, IE gibt nur ein schwarzes Bild wieder ... und ich kann so ein anderes Verhalten nicht verstehen! Darüber hinaus funktioniert IE11 auf einem Windows 7-Rechner gut!
Einige Ideen? Vielen Dank im Voraus Jungs!
3 Antworten
Nachdem ich mich mit der SVG-Dateistruktur beschäftigt habe, habe ich festgestellt, dass dieses Problem die Stylingeigenschaften von SVG betrifft.
Adobe Illustrator gibt mir vier Optionen zum Deklarieren von Stylesheet-Eigenschaften beim Speichern von Grafiken als SVG-Datei
- Präsentationsattribute
- Stilattribute
- Stilattribute (Entitätsreferenz)
- Stilelemente
Entsprechend den W3C-Spezifikationen bezüglich SVG1.1 'Styling
Kein Problem bei der Verwendung der ersten drei Möglichkeiten zum Formatieren von Eigenschaften, aber das Einbetten von Stylesheets in SVG-Inhalt in einem <style> -Element verursacht das Problem!
Hier meine letzten Testergebnisse
%Vor%Ich hoffe, dass es jemandem helfen wird ...
Achten Sie darauf, die Breite und Höhe der Hintergrundgröße festzulegen.
Hintergrundgröße: 80px 60px;
Ich hatte dieses Problem auch.
In meinem Fall hat das Ändern der "Styling" -Einstellung nicht geholfen, aber das Kontrollkästchen "responsive" im Illustrator SVG-Export-Dialog deaktiviert, selbst mit einem internen CSS-Element im SVG.
Der Unterschied ist, dass das SVG-Element ein Attribut width and height benötigt.
Diese Attribute sind nicht vorhanden, wenn Sie das Kontrollkästchen "Responsive" im Illustrator SVG-Export-Dialogfeld aktivieren. Wenn das wirklich alles ist, dann ist es schlecht benannt, denke ich.
Wenn Sie inkscape oder ein anderes Tool zum Erstellen Ihrer SVGs verwenden, bin ich sicher, dass Ihre Beobachtungen, wenn sie hier hinzugefügt werden, von Nutzen wären.
Wenn Sie möchten, dass SVG-Hintergrundbilder in CSS im Internet Explorer ordnungsgemäß funktionieren, müssen Sie sicherstellen, dass das Stammelement des SVG über ein Attribut width and height verfügt. (z. B. durch Deaktivieren des Kontrollkästchens "responsive" in AI).
Das Attribut width and height muss nicht muss die korrekte Anzeigegröße haben (was sich über die CSS-Eigenschaft background size ändern kann), aber do um das richtige Seitenverhältnis zu sein.
Wenn Sie das SVG-Markup von Hand codieren und die ersten beiden Werte für viewbox null sind, können Sie einfach die letzten beiden Werte für Breite und Höhe verwenden. z.B.
%Vor%Tags und Links internet-explorer css svg html5 windows-10