IE11 mit svg als background-image schlägt fehl

Ich bin vor ein seltsames problem mit Internet Explorer 11 unter Windows 10 Maschine.
Mit einem SVG-Bild als hintergrund-das ist, scheint völlig schwarz, Rand mit dem gleichen code funktioniert.

Hier ein wenig Geige reproduzieren mein problem

Mithilfe dieser, Edge rendert SVG zu Recht, der IE macht nur ein Schwarzes Bild...und ich kann nicht verstehen, wie ein anderes Verhalten!
Außerdem, auf einer Windows 7 Maschine IE11 funktioniert!

Paar Ideen?
Vielen Dank im Voraus Jungs!

CSS:

.icon-user-default {
  width: 128px;
  height: 128px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDgwMCA4MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwMCA4MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojODI3OTc3O30KCS5zdDF7ZmlsbDojN0I3MjcwO30KCS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0Q5QTc4Qzt9Cgkuc3Qze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOiNGMUYyRjI7fQoJLnN0NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7ZmlsbDojRTZFN0U4O30KCS5zdDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30KCS5zdDZ7ZmlsbDojRUFDMEE3O30KCS5zdDd7ZmlsbDojRjJEN0JDO30KCS5zdDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6IzJGMzQzQTt9Cgkuc3Q5e2ZpbGw6I0EwQjJCRTt9Cgkuc3QxMHtmaWxsOiNGRkZGRkY7fQoJLnN0MTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnIGlkPSJiYWNrZ3JvdW5kIj4KPC9nPgo8ZyBpZD0iT2JqZWN0c18xXyI+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0MDAiIGN5PSI0MDAiIHI9IjMyMS4xIi8+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNzIxLjEsNDAwYzAtMTc3LjMtMTQzLjgtMzIxLjEtMzIxLjEtMzIxLjF2NjQyLjJDNTc3LjMsNzIxLjEsNzIxLjEsNTc3LjMsNzIxLjEsNDAweiIvPgoJPGc+CgkJPGRlZnM+CgkJCTxwYXRoIGlkPSJTVkdJRF8xXyIgZD0iTTcyMS4xLDQwMGMwLTE3Ny4zLTE0My44LTMyMS4xLTMyMS4xLTMyMS4xQzIyMi43LDc4LjksNzguOSwyMjIuNyw3OC45LDQwMAoJCQkJYzAsMTc3LjMsMTQzLjgsMzIxLjEsMzIxLjEsMzIxLjFDNTc3LjMsNzIxLjEsNzIxLjEsNTc3LjMsNzIxLjEsNDAweiIvPgoJCTwvZGVmcz4KCQk8Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj4KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4KCQk8L2NsaXBQYXRoPgoJCTxwb2x5Z29uIGNsYXNzPSJzdDIiIHBvaW50cz0iNDQ3LDU4NC4xIDQwMS4xLDY5NS41IDM1Myw1ODQuMSAzNTMsNDgxIDQ0Nyw0ODEgCQkiLz4KCQk8cGF0aCBjbGFzcz0ic3QzIiBkPSJNMzUzLDU0Mi40YzAsMC0xMDAuOCwxMy4xLTExNCwyNi44Yy0xMS41LDEyLTM1LjQsMTI2LjctNDAuOSwxNTEuOWMxNTcsMCwyMDIsMCwyMDIsMHYtNjAuNUwzNTMsNTQyLjR6Ii8+CgkJPHBhdGggY2xhc3M9InN0NCIgZD0iTTQ0Nyw1NDIuNGMwLDAsMTAwLjgsMTMuMSwxMTQsMjYuOGMxMS41LDEyLDM1LjQsMTI2LjcsNDAuOSwxNTEuOWMtMTU3LDAtMjAyLDAtMjAyLDB2LTYwLjVMNDQ3LDU0Mi40eiIvPgoJCTxnIGNsYXNzPSJzdDUiPgoJCQk8cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNDAwLDE4NS45YzQ1LjcsMCwxMTcuOSwyNiwxMTcuOSwxNDcuNmMwLDcwLjItMjIuOSwxMTYuMi0zMi45LDEyOWMtOS4yLDExLjctNjAuOCwzNi43LTg1LDM2LjcKCQkJCUM0MDAsMzc2LjIsNDAwLDE4NS45LDQwMCwxODUuOXoiLz4KCQkJPHBhdGggY2xhc3M9InN0NiIgZD0iTTU0MC42LDM2Mi41YzItMTkuNC03LjItMzYuNy0yMC43LTM4LjVjLTEzLjQtMS44LTI2LDEyLjQtMjgsMzEuOWMtMiwxOS40LDcuMiwzNi43LDIwLjcsMzguNQoJCQkJQzUyNiwzOTYuMiw1MzguNiwzODEuOSw1NDAuNiwzNjIuNXoiLz4KCQk8L2c+CgkJPGcgY2xhc3M9InN0NSI+CgkJCTxwYXRoIGNsYXNzPSJzdDciIGQ9Ik00MDAsMTg1LjljLTQ1LjcsMC0xMTcuOSwyNi0xMTcuOSwxNDcuNmMwLDcwLjIsMjIuOSwxMTYuMiwzMi45LDEyOWM5LjIsMTEuNyw2MC44LDM2LjcsODUsMzYuNwoJCQkJQzQwMCwzNzYuMiw0MDAsMTg1LjksNDAwLDE4NS45eiIvPgoJCQk8cGF0aCBjbGFzcz0ic3Q3IiBkPSJNMjU5LjQsMzYyLjVjLTItMTkuNCw3LjItMzYuNywyMC43LTM4LjVjMTMuNC0xLjgsMjYsMTIuNCwyOCwzMS45YzIsMTkuNC03LjIsMzYuNy0yMC43LDM4LjUKCQkJCUMyNzQsMzk2LjIsMjYxLjQsMzgxLjksMjU5LjQsMzYyLjV6Ii8+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDgiIGQ9Ik0yOTcuOCwzNjQuNmg4LjFjMCwwLTUtMzEuNyw5LjYtNDEuOWMwLTE1LjgsMC0yMC41LDAtMjAuNXMtNS42LTAuNy01LjYtMjQuN2MwLTI0LjEsMjguNy00MS4yLDkwLjEtNDEuMgoJCQljMC0zNC4zLDAtODguMSwwLTg4LjFzLTEyMS4zLDIuNi0xMjEuMyw5MC42YzAsMzYuNiwwLDg1LjIsMCw4NS4yczguOS0xLjYsMTUuMiwzLjdDMzAwLjcsMzMzLjUsMjk3LjgsMzY0LjYsMjk3LjgsMzY0LjZ6Ii8+CgkJPHBhdGggY2xhc3M9InN0OCIgZD0iTTUwMi4yLDM2NC42SDQ5NGMwLDAsNC45LTMxLjctOS42LTQxLjljMC0xNS44LDAtMjAuNSwwLTIwLjVzNS42LTAuNyw1LjYtMjQuN2MwLTI0LjEtMjguNy00MS4yLTkwLjEtNDEuMgoJCQljMC0zNC4zLDAtODguMSwwLTg4LjFzMTIxLjMtMi44LDEyMS4zLDg1LjNjMCwzNi42LDAsOTAuNiwwLDkwLjZzLTguOS0xLjYtMTUuMiwzLjdDNDk5LjMsMzMzLjUsNTAyLjIsMzY0LjYsNTAyLjIsMzY0LjZ6Ii8+CgkJPGcgY2xhc3M9InN0NSI+CgkJCTxwb2x5Z29uIGNsYXNzPSJzdDkiIHBvaW50cz0iNDAwLDY2MC42IDM2OCw1NTEuNCAzNTYuMiw2MDAuNiAJCQkiLz4KCQkJPHBvbHlnb24gY2xhc3M9InN0MTAiIHBvaW50cz0iMzUxLjcsNTMxLjEgMzY4LjQsNTUyLjkgMzU2LjIsNjAwLjYgMzMwLjUsNTY1LjkgCQkJIi8+CgkJPC9nPgoJCTxnIGNsYXNzPSJzdDUiPgoJCQk8cG9seWdvbiBjbGFzcz0ic3Q5IiBwb2ludHM9IjQwMCw2NjAuNiA0MjguOSw1NTAuMSA0NDMuOCw2MDAuNiAJCQkiLz4KCQkJPHBvbHlnb24gY2xhc3M9InN0MTAiIHBvaW50cz0iNDQ4LjMsNTMxLjEgNDI4LjYsNTUxLjYgNDQzLjgsNjAwLjYgNDcxLjgsNTY1LjkgCQkJIi8+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDExIiBkPSJNNDAwLDQ0Ni43YzIxLjMsMCwzOC41LTcsMzguNS0xNS43aC03Ny4xQzM2MS41LDQzOS43LDM3OC43LDQ0Ni43LDQwMCw0NDYuN3oiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K)
}

HTML:

<div class="icon-user-default">
</div>

  • Gut, ich kann es reproduzieren, also bist du nicht verrückt. Kann Sie gehören der un-base64 würd SVG-text? Vielleicht gibt es eine sub-Funktion dort nicht unterstützt wird, wird in IE11.
  • Getestet habe ich Ihre code-link auf die Letzte IE11 auf Windows 7 (64-bit) und die background-image zeigt OK an. Welche browser-und OS sind Sie sehen dies auf?
  • Es ist in der Frage. =)
  • vielen Dank für Ihren Vorschlag, krank versuchen ;)!
  • werfen Sie einen Blick auf die folgenden Artikel und insbesondere die Kommentare.. andere haben das gleiche Problem mit dieser funktioniert nicht im IE11 und Safari .. css-tricks.com/probably-dont-base64-svg
  • Base64 schien für mich arbeiten, zurück in IE9, aber so oder so, die post ist ein guter Punkt, dass base64 ist eine Kodierung, keine Kompression Methode, und sollte nicht verwendet werden für dieses.
  • Ich habe festgestellt, dass meine SVG ' s funktionieren auf IE 11 (Win7), wenn verwendet mit Base64. Bei Verwendung als XML, nicht. Komisch.

InformationsquelleAutor Beri75 | 2015-12-11
  1. 21

    Stellen Sie sicher, um den hintergrund der Größe Breite und Höhe

    background-size: 80px 60px;

    • Um es noch klarer: Stellen Sie sicher, dass SEPARATE hintergrund der Größe Breite und Höhe, auch wenn beide zahlen gleich sind: background-Größe: 20 x 20px;
    • Für den Rekord % hat bei mir nicht funktioniert, aber px haben.
    InformationsquelleAutor Annia Martinez
  2. 17

    Nach dem Graben in die SVG-Datei-Struktur, die ich gefunden, dass problem betrifft die SVG' styling-Eigenschaften.

    Adobe Illustrator geben Sie mir vier Möglichkeiten zur Deklaration von style-sheet-Eigenschaften beim speichern von Grafiken als SVG-Datei

    1. Präsentation Attribute
    2. Style-Attribute
    3. Style-Attribute (Entity Reference)
    4. Style-Elemente, Die

    Entsprechend W3C-Spezifikationen in Bezug auf SVG1.1' Styling

    Kein problem mit den ersten drei Möglichkeiten zum styling-Eigenschaften, aber die Einbettung von Stylesheets in SVG-Inhalten in einer <style> element verursachen das problem!!!

    Hier meine Letzte Geige Testergebnisse

    <div class="icon-user-default-css1"></div>
<div class="icon-user-default-css2"></div>
<div class="icon-user-default-css3"></div>
<div class="icon-user-default-css4"></div>

    Ich hoffe auf Hilfe von jemandem...

    InformationsquelleAutor Beri75
  3. 10

    Wenn Sie, wie ich, haben inline SVG in den hintergrund

    (z.B. <svg xmlns='http://www.w3.org/2000/svg'...></svg>)

    Werden Sie wollen, stellen Sie sicher, dass Ihre Codierung ist charset=utf8 (z.B. url(data:image/svg+xml;charset=utf8,)

    Sorgen auch dafür, dass reserviert URL Zeichen codiert werden (z.B. < === %3C und > === %3E) und Verwendung von single quotes ' um Attribute.

    • Zusätzlich zu dieser, werden Sie brauchen, um zu entkommen alle # Zeichen (indem Sie Sie mit %23 wie mit der < und > hier erwähnt)
    InformationsquelleAutor Jonathan
  4. 9

    Ich hatte dieses problem auch.

    In meinem Fall, ändern Sie die "styling" - Einstellung nicht helfen, aber das deaktivieren der "responsive" - checkbox in der Illustrator-SVG-export-dialog hat, auch mit einem internen CSS-element in das SVG.

    IE11 mit svg als background-image schlägt fehl

    Der Unterschied ist, dass das SVG-element muss eine Breite und Höhe Attribut.

    Diese Attribute sind nicht vorhanden, wenn Sie überprüfen die "responsive" - checkbox in der Illustrator-SVG-export-dialog. Wenn das wirklich alle es tut, dann ist es schlecht benannt, denke ich.

    Wenn Sie mit inkscape oder einem anderen Werkzeug, um Ihren SVGs, ich bin sicher, dass Sie Ihre Beobachtungen, wenn Sie hier wäre.

    Also, wenn Sie wollen, SVG-Hintergrundbilder in CSS zu arbeiten, richtig im IE, stellen Sie sicher, dass das root-element des SVG hat eine width-und height-Attribut. (z.B. durch deaktivieren der "responsive" - checkbox im AI).

    Die width-und height-Attribut nicht haben, um die richtige display-Größe (die kann sowieso ändern, über die CSS-background-size-Eigenschaft), aber Sie tun haben, um das korrekte Seitenverhältnis.

    Wenn Sie hand-Codierung die SVG-markup, und die ersten beiden Werte für die viewbox null sind, dann können Sie einfach die letzten beiden Werte für Breite und Höhe.
    z.B.

    <svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="298.2"
height="108.8"
viewBox="0 0 298.2 108.8">
    • Dies hat mir geholfen, mit der Positionierung Probleme, während auch die Verwendung von svg als background-image. Wenn top oben angegeben wurde, kam es 30px von oben in IE11. Dank
    InformationsquelleAutor brennanyoung
Schreibe einen Kommentar