Pourquoi l'image d'arrière-plan de l'URL de mes données SVG ne s'affiche-t-elle pas dans Firefox ?

L'image d'arrière-plan de l'URL de données SVG ne s'affiche pas dans Firefox

Lors de la définition d'un SVG comme image d'arrière-plan à l'aide d'une URL de données dans un pseudo élément, l’image n’apparaît pas dans Firefox. En effet, Firefox traite le caractère « # » dans l'URL comme le début d'un identifiant de fragment.

Pour résoudre ce problème, le contenu de l'URL de données doit être codé en URL. Cela implique de convertir tous les caractères « # » en « # ». Le code CSS modifié ci-dessous intègre le codage URL :

content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,%3Csvg version="1.1">

Par le codage URL du contenu de l'URL des données, Firefox interprète correctement les caractères de hachage dans le cadre des données SVG, permettant à l'image d'être affichée en arrière-plan.

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!