Pourquoi mon URL de données SVG ne fonctionne-t-elle pas comme arrière-plan de pseudo-éléments dans Firefox ?

L'image de données SVG ne fonctionne pas comme image d'arrière-plan dans un pseudo-élément

Dans certaines circonstances, définir un SVG comme image d'arrière-plan pour un pseudo-élément utilisant une URL xml data:image/svg peut ne pas s'afficher dans Firefox. Cela se produit car le caractère # dans l'URL est interprété comme le début d'un identifiant de fragment.

Encodage de l'URL des données

Pour résoudre ce problème et permettre au SVG de afficher dans Firefox, il est nécessaire d'encoder le contenu de l'URL des données. Cela implique de convertir tous les caractères dièse (#) dans l'URL de données en #.

Voici un exemple du code modifié :

content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!