IE11 en utilisant svg comme background-image ne

Je suis face à un problème bizarre avec Internet Explorer 11 en cours d'exécution sur Windows 10 de la machine.
À l'aide d'une image SVG comme arrière-plan des thats apparaît totalement noir, le Bord avec le même code fonctionne très bien.

Ici un peu de violon de reproduire mon problème

À l'aide de cette, Bord rend SVG, à juste titre, c'est à dire rend seulement une image en noir...et je ne peux pas comprendre un tel comportement différent!
En outre, sur une machine Windows 7 IE11 fonctionne très bien!

Quelques idées?
Merci d'avance les gars!

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>

  • Eh bien, je peux le reproduire, de sorte que vous n'êtes pas fou. Pouvez-vous le cas de l'onu-base64 avais SVG texte? Peut-être il y a une sous-fonctionnalité qui n'est pas pris en charge dans IE11.
  • J'ai testé votre code lien sur les dernières IE11 sur Windows 7 (64-bit) et la background-image affiche OK. Quel navigateur et système d'exploitation êtes-vous voir sur?
  • C'est dans la question. =)
  • merci pour votre suggestion, malade d'essayer ;)!
  • jetez un oeil à la suite de l'article et surtout les commentaires.. d'autres ont le même problème avec ce pas de travail dans IE11 et Safari .. css-tricks.com/probably-dont-base64-svg
  • Base64 semblait fonctionner pour moi de retour dans IE9, mais de toute façon ce post fait un bon point qui est un encodage base64, pas une méthode de compression, et ne doit pas être utilisé pour cela.
  • J'ai trouvé, que mon SVG de travail sur IE 11 (Win7), lorsqu'il est utilisé avec Base64. Lorsqu'il est utilisé comme XML, ils ne. Bizarre.

InformationsquelleAutor Beri75 | 2015-12-11
  1. 20

    Assurez-vous de choisir la couleur de fond de la taille de la largeur et de la hauteur

    background-size: 80px 60px;

    • Pour être encore plus clair: veillez à SÉPARER le fond de la taille de la largeur et de la hauteur, même si les deux nombres sont les mêmes: background-size: 20x 20px;
    • Pour l'enregistrement, % ne fonctionne pas pour moi, mais px fait.
    InformationsquelleAutor Annia Martinez
  2. 16

    Après creuser dans le fichier SVG structure, j'ai trouvé que le problème concerne le SVG " style propriétés.

    Adobe Illustrator donnez-moi quatre options pour déclarer des propriétés de feuille de style lors de l'enregistrement graphique comme un fichier SVG

    1. Attributs De Présentation
    2. Attributs De Style
    3. Attributs De Style (Entité De Référence)
    4. Éléments De Style

    En conséquence de spécifications du W3C concernant SVG1.1 " Style

    Pas de problème à l'aide de la première de trois manières, le style propriétés, mais l'incorporation des feuilles de style en SVG contenu à l'intérieur d'un <style> élément à l'origine du problème!

    Voici ma dernière violon résultats de test

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

    Je l'espère, sera utile à quelqu'un...

    InformationsquelleAutor Beri75
  3. 9

    Si, comme moi, vous avez inline SVG dans votre arrière-plan

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

    Vous voulez vous assurer que votre encodage est charset=utf8 (par exemple url(data:image/svg+xml;charset=utf8,)

    Également veiller à ce que réservé URL caractères sont encodées (par exemple < === %3C et > === %3E) et vous utilisez des guillemets simples ' autour des attributs.

    • En plus de cela, vous aurez besoin d'échapper à toute # caractères (en les remplaçant par des %23, comme avec le < et > mentionné ici)
    InformationsquelleAutor Jonathan
  4. 8

    J'ai eu ce problème aussi.

    Dans mon cas, changer de "style" réglage n'a pas aider, mais en décochant la case "responsive" case à cocher dans l'Illustrateur dialogue d'exportation SVG fait, même avec un intérieur CSS de l'élément dans le SVG.

    IE11 en utilisant svg comme background-image ne

    La différence est que l'élément SVG pour les besoins de la largeur et la hauteur de l'attribut.

    Ces attributs sont absents lorsque vous cochez la case "sensible" dans la boite de Illustrator, SVG boîte de dialogue exporter. Si c'est vraiment tout ce qu'il fait, alors il est mal nommée, je crois.

    Si vous êtes en utilisant inkscape, ou un autre outil pour faire de votre SVGs, je suis sûr que vos observations, lorsqu'il est ajouté ici, serait de valeur.

    Donc, si vous voulez SVG images de fond en CSS pour fonctionner correctement dans internet explorer, assurez-vous que l'élément racine du SVG a une largeur et une hauteur d'attribut. (par exemple, en décochant la case "responsive" case à cocher dans IA).

    La largeur et la hauteur de l'attribut ne pas doivent être de la bonne taille d'affichage (qui peut changer de toute façon, via le CSS background-size de propriété), mais ils ne être le rapport d'aspect correct.

    Si vous êtes à la main de codage de la SVG de balisage, et les deux premières valeurs pour viewbox sont de zéro, alors vous pouvez simplement utiliser les deux dernières valeurs pour la largeur et la hauteur respectivement.
    par exemple,

    <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">
    • Cela m'a aidé avec les problèmes de positionnement tout en utilisant svg comme une image de fond d'écran. Lorsque top haut a été spécifié, il est venu sur 30px à partir du haut dans IE11. Merci
    InformationsquelleAutor brennanyoung