CSS: utiliser raw svg dans le paramètre URL D'un fond-image dans IE
Donc, je suis en train de faire quelque chose comme ceci:
div {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none'><rect x='0' y='40' width='100' height='20' /><rect x='40' y='0' width='20' height='100' /></svg>");
}
Voir ici: http://jsfiddle.net/trxkcx41/4/
cela fonctionne à merveille dans les versions actuelles Chrome, Safari (OS X et iOS), et Firefox. Cependant, la SVG n'apparaît pas du tout dans IE 9, 10 ou 11.
est-ce parce que cela n'est pas supporté dans IE, ou parce que je fais quelque chose de mal?
[MISE À JOUR AVEC SOLUTION]
merci à hungerstar, j'ai obtenu ce travail. Pour résumer sa recommandation, j'ai dû apporter les changements suivants:
changer le type de données de
data:image/svg+xml;utf8data:image/svg+xml;charset=utf8(i.e.,charset=est requis)URL encodent le svg. Pour minimiser le codage D'URL, utilisez
'au lieu de"pour inclure les attributs. Donc, dans mon cas, seul le<et>nécessaire pour être encodage.
Pour, en fin de compte, mon CSS ressemblait à ceci:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none' %3E%3Crect x='0' y='40' width='100' height='20' /%3E%3Crect x='40' y='0' width='20' height='100' /%3E%3C/svg%3E");
4 réponses
IE semble supporter l'utilisation de utf8 dans un data URI, c'est tout simplement d'être plus pointilleux à ce sujet. Voir cette Codepen Blog Post pour plus de détails, mais voici les faits saillants:
L'auteur RFC2397 et faits saillants:
données:[
][;base64],
est une spécification de type de média Internet (avec des paramètres optionnels.) L'apparition de ";base64" signifie que les données sont encodées en base64. Sans"; base64", les données (en tant que séquence d'octets) sont représentées à l'aide de l'encodage ASCII pour les octets situés à l'intérieur de la plage des caractères D'URL sûrs et à l'aide de l'encodage %xx hex standard des URLs pour les octets situés à l'extérieur de cette plage. Si < mediatype> est omis, il est par défaut text/plain;charset=US-ASCII. En raccourci, "text / plain" peut être omis mais le paramètre charset fourni.
- la plupart des navigateurs sont indulgents à propos du charset= string, mais C'est nécessaire pour Internet Explorer. Cela signifie que vous devez utiliser
;charset=utf8,au lieu de;utf8,. - à Partir de ci-dessus, "sans ";base64", les données (en tant que séquence d'octets) sont représentées en utilisant l'encodage ASCII pour les octets à l'intérieur de la plage des caractères D'URL sécurisés et en utilisant l'encodage %xx hex standard des URLs pour les octets à l'extérieur de cette plage." ce qui signifie que vous aurez à cent-encoder les caractères qui ne sont pas URL-safe. Par exemple,
<svg>%3Csvg%3E. Vous pouvez réduire le quantité de pourcentage d'encodage qui doit être fait en utilisant des guillemets simples'au lieu de guillemets".
IE9 j'ai URL Encoder tout le code SVG.
c'est mon workflow pour les images de fond SVG.
premier coller le code SVG ici pour l'optimiser: https://jakearchibald.github.io/svgomg/ ("coller le balisage")
vous pouvez supprimer la " viewBox "mais assurez-vous que" width "et" height " sont définis dans le code SVG, IE9 en a besoin pour une meilleure implémentation CSS.
Maintenant, vous avez quelque chose comme:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50"/></svg>
dans ce cas, je dois ajouter une couleur de remplissage, parce qu'il n'y en avait aucune définie. j'ajoute donc:
fill="#cc0000"
à la fin de l' chemin element (s'il y a un couple d'éléments de chemin dans un groupe ("g") vous devez mettre cette couleur de remplissage à tous ceux-ci. Si le SVG a des traits, faites de même avec les traits comme stroke="#cc0000").
nous avons maintenant le code SVG suivant:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50" fill="#cc0000"/></svg>
maintenant encoder tout le code SVG ici: http://meyerweb.com/eric/tools/dencoder/
de sorte que vous obtenez:
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E
au moins mettez cette chose ensemble dans votre CSS:
.apple {
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E');
}
Certains avantages qui m'ont rendu fou:
assurez-vous pour envelopper le code SVG avec ' dans le CSS parce que dans le SVG nous utilisons "!
assurez-vous utiliser
data:image/svg+xml;charset=UTF-8
rien autre.
maintenant la SVG est affichée avec la couleur "# cc0000 " (rouge foncé) même dans IE9 sur windows.
avec cette URL encodée SVG je peux encore changer la couleur avec une variable PHP. Par exemple, je remplace simplement "cc0000" par:
<?php echo preg_replace("/#/", "", $textcolor); ?>
je le fais pour les modèles WordPress afin que le client puisse choisir la couleur de l'icône dans le backend.
Juste une remarque pour cette. Dans IE 11, Vous pouvez utiliser charset=utf8. Vous avez l'encoder au moins < et > (à condition que vous utilisez '' pour les valeurs d'attribut non "". En outre, soyez prudent dans le cas où vous utilisez des caractères non-ASCII. Vous devez fournir leur valeur encodée UTF-8 - c'est-à-dire trouver un outil qui vous donne le code UTF-8 pour le caractère (comme Babel Map) et ensuite le fournir sous forme encodée URL. c'est à dire j'ai voulu rendre l' ▾ caractère (U+25BE). UTF-8 représentation des le personnage est \xE2\x96\xBE et %E2%96%BE sous forme codée par URL.
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
Cette solution fonctionne bien pour moi, j'utilise le charset=utf8 au lieu de utf-8.