J'ai un SVG:
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22a%22%20patternUnits%3D%22userSpaceOnUse%22%20width%3D%225%22%20height%3D%225%22%20patternTransform%3D%22rotate(45)%22%3E%3Cpath%20stroke%3D%22%23fffa72%22%20d%3D%22M1%200v5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E');
Il l'a testé avec un outil externe et il fonctionne très bien:
J'aimerais maintenant l'utiliser dans background-image. J'ai encodé le SVG avec https://www.url-encode-decode.com/
Je prends alors le SVG encodé et le mets dans mon SCSS:
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%22100%25%22+height%3D%22100%25%22%3E%0D%0A++%3Cdefs%3E%0D%0A++++%3Cpattern+id%3D%22stripes%22+patternUnits%3D%22userSpaceOnUse%22+width%3D%227%22+height%3D%226%22+patternTransform%3D%22rotate%2845%29%22%3E%0D%0A++++++%3Cline+x1%3D%221%22+y%3D%220%22+x2%3D%221%22+y2%3D%227%22+stroke%3D%22%23fffa72%22+stroke-width%3D%221.5%22+%2F%3E%0D%0A++++%3C%2Fpattern%3E%0D%0A++%3C%2Fdefs%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22%23fffeea%22+%2F%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22url%28%23stripes%29%22+%2F%3E%0D%0A%3C%2Fsvg%3E');
3 Réponses :
Votre valeur xmlns est incorrecte. Il s'agit de données http://www.w3.org/2000/svg et non https://.
<div></div>
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='stripes' patternUnits='userSpaceOnUse' width='7' height='6' patternTransform='rotate(45)'%3E%3Cline x1='1' y='0' x2='1' y2='7' stroke='%23fffa72' stroke-width='1.5' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23fffeea' /%3E%3Crect width='100%25' height='100%25' fill='url(%23stripes)' /%3E%3C/svg%3E");
}
html, body {height: auto;}
Documentation: https://www.w3.org/2000/svg a> - oui, avec https: // : D
Dans les éléments intégrés, la plupart des navigateurs utilisent par défaut l'attribut http: //www.w3.org/2000/svg quand il ne résout pas (vous pouvez essentiellement le supprimer et cela fonctionne toujours). Mais ils ne le font pas pour les SVG encodés en background-image base64.
En bref, cela ne fonctionnera pas comme image si elle n'est pas valide.
Merci. Un Q: Comment avez-vous produit votre contenu? il ne s'agissait pas simplement de supprimer le "s" de mon "https". Ma chaîne d'origine est assez différente de la vôtre dans son échappatoire. mien : image-d'arrière-plan: url ('data: image / svg + xml; charset = utf8,% 3Csvg + xmlns% 3D% 22https% 3A% 2F% 2Fwww.w3.org . ..... où le vôtre commence par background-image: url ("data: image / svg + xml,% 3Csvg xmlns = 'http: // www.w3.org/2000/svg 'width =' 100% 25 '
Je suppose que ma question est de savoir quel processus d'encodage vous transmet mon code svg original pour le faire fonctionner (à part https -> http). la modification de mon code d'origine et la suppression des «s» ne font pas fonctionner le code. mais en utilisant votre exemple encodé a fonctionné. Comment l'avez-vous encodé?
J'apprécierais beaucoup si vous pouviez jeter un œil à mes commentaires
@Jason, j'ai fait exactement ce que vous avez fait (utilisé un encodeur en ligne ), mais J'ai changé manuellement les xmlns de https: // à http: // après avoir réalisé que c'était la cause. (Travailler en tant que intégré et non en tant qu'image est généralement dû à un xmlns défectueux, c'est ce que j'ai d'abord inspecté de près). Ne pas modifier xmlns entraîne également un résultat défectueux dans l'encodeur que j'ai utilisé. J'ai trouvé cet encodeur en recherchant "svg encode base64" et en cliquant sur le premier résultat.
Vous pouvez consulter les différences entre le codage base64 et le codage URL ici . Ils sont similaires, mais différents. Un objet data: image / svg + xml doit être encodé avec base64, afaik. Il est possible de travailler avec d'autres types d'encodage, mais les encodeurs d'URL sont spécifiques aux URL, ils ne sont pas destinés aux données .
Ce n'est peut-être pas la réponse à votre question exacte,
mais vous pouvez créer votre arrière-plan en utilisant un linear-gradient avec un code beaucoup plus simple:
body {
background: linear-gradient(135deg, #fff 2px, #fffa72, #fff 5px, #fff 9px, #fffa72, #fff 12px) 0 0 / 10px 10px;
}
Cela ne répond pas à ma question, mais je l'apprécie néanmoins. Mon objectif était d'apprendre à intégrer des SVG, mais vous avez raison de dire que dans ce but particulier, votre solution beaucoup plus simple aurait fait le travail. Merci.
Enregistrez votre svg dans un fichier.svg et essayez d'utiliser https://www.developertoolkits.com/ base64 / encodeur
Il prend des images et les transforme en URL de données que vous pouvez ensuite déposer en ligne ou en css comme vous essayez de le faire.
Le site Web que vous utilisez est un encodeur d'URL.
voir ma réponse pour: stackoverflow.com/questions/54077571/...
Cela peut être utile à l'avenir: URL-encoder pour SVG