web-dev-qa-db-fra.com

CSS: Utilisation de svg brut dans le paramètre URL d'une image d'arrière-plan dans IE

Donc, j'essaie de faire quelque chose comme ça:

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 de Chrome, Safari (OS X et iOS) et Firefox. Cependant, le SVG n'apparaît pas du tout dans IE 9, 10 ou 11.

Est-ce parce que cela n'est pas pris en charge dans IE ou parce que je fais quelque chose de mal?

([MISE À JOUR AVEC LA SOLUTION]} [

Merci à hungerstar , ça fonctionne. Pour résumer sa recommandation, je devais apporter les modifications suivantes:

  1. Changez le type de données de data:image/svg+xml;utf8 à data:image/svg+xml;charset=utf8 (c'est-à-dire, charset= est requis)

  2. URL encoder le svg. Pour minimiser le codage d'URL, utilisez ' au lieu de " pour entourer les attributs. Donc, dans mon cas, seuls les < et > devaient être encodés.

Pour, finalement, 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");
cssinternet-explorersvg
22
mattstuehler

IE semble prendre en charge l’utilisation de utf8 dans un URI de données, c’est simplement plus difficile à ce sujet. Voir ceci Blog de Codepen pour plus de détails mais voici les faits saillants:

L'auteur pointe vers RFC2397 et souligne:

data: [<mediatype>] [; base64], <data>

Le <type de média> est une spécification de type de média Internet (avec des paramètres facultatifs.) L'apparition de "; base64" signifie que les données sont codées en base64. Sans "; base64", les données (sous forme d'une séquence d'octets) sont représentées à l'aide de ASCII codage pour les octets situés dans la plage de caractères URL sécurisés et à l'aide du codage standard% xx hex des URL pour les octets situés en dehors de cette plage. . Si <type de média> est omis, la valeur par défaut est text/plain; charset = US-ASCII. En abrégé, "text/plain" peut être omis mais le paramètre charset fourni.

  • La plupart des navigateurs sont indulgents à propos de charset = string, mais c'est obligatoire pour Internet Explorer. Cela signifie que vous devez utiliser ;charset=utf8, au lieu de ;utf8,.
  • A partir de ci-dessus, "Sans"; base64 ", les données (sous forme d'une séquence d'octets) sont représentées à l'aide de ASCII - codage pour les octets compris dans la plage de caractères d'URL sécurisés et à l'aide du codage standard% xx hex URL pour les octets situés en dehors de cette plage. " Ce qui signifie que vous devrez encoder pour cent des caractères qui ne sont pas sécurisés contre les URL. Par exemple, <svg> à %3Csvg%3E. Vous pouvez réduire le pourcentage d'encodage à utiliser en utilisant des guillemets simples ' au lieu de guillemets doubles ".
19
hungerstar

Pour IE9, je dois URL encoder tout le code SVG. 

Ceci est mon flux de travail pour les images d'arrière-plan SVG.

Collez d'abord le code SVG ici pour l'optimiser: https://jakearchibald.github.io/svgomg/ ("coller le balisage")

Vous pouvez supprimer le "viewBox" mais assurez-vous que "largeur" ​​et "hauteur" sont définies 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 car il n'y en avait pas. alors j'ajoute:

fill="#cc0000"

à la fin de l'élément path (s'il y a deux é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 le coups 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>

Encodez maintenant tout le code SVG ici: http://meyerweb.com/eric/tools/dencoder/

alors 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, rassemblez tout cela 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');
    }

Quelques avantages qui m'ont rendu fou:

Assurez-vous que enveloppe le code d'arrière-plan SVG avec ' dans le CSS car dans le SVG, nous utilisons "!

Soyez sûr d'utiliser

data:image/svg+xml;charset=UTF-8

rien d'autre.

Maintenant, le SVG est affiché avec la couleur "# cc0000" (rouge foncé) même dans IE9 sous Windows.

Avec cette URL encodée SVG, je peux toujours 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.

 enter image description here

9
Henning Fischer

Juste une note à ceci. Dans IE 11, vous pouvez utiliser charset = utf8. Vous devez encoder au moins < et > au moyen d'URL (à condition que vous utilisiez '' pour des valeurs d'attribut autres que "". Faites également attention si vous utilisez des caractères non-ASCII. Vous devez fournir leur valeur codée UTF-8 - trouver un outil qui vous donne un code UTF-8 pour le caractère (comme Babel Map), puis sous une forme encodée en URL, c’est-à-dire que je voulais restituer le caractère ▾ (U+25BE). La représentation UTF-8 du caractère est \xE2\x96\xBE et %E2%96%BE dans. Formulaire encodé en 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");
0
Đonny