Warum funktioniert meine SVG-Daten-URL nicht als Pseudoelement-Hintergrund in Firefox?

SVG-Datenbild funktioniert nicht als Hintergrundbild in einem Pseudoelement

Unter bestimmten Umständen wird ein SVG als Hintergrundbild festgelegt für ein Pseudoelement, das eine data:image/svg-XML-URL verwendet, wird in Firefox möglicherweise nicht gerendert. Dies liegt daran, dass das #-Zeichen in der URL als Anfang einer Fragmentkennung interpretiert wird.

Codieren der Daten-URL

Um dieses Problem zu beheben und der SVG-Datei dies zu ermöglichen Für die Anzeige in Firefox ist es erforderlich, den URL-Inhalt der Daten zu verschlüsseln. Dabei werden alle Hash-Zeichen (#) innerhalb der Daten-URL in # umgewandelt.

Hier ist ein Beispiel für den geänderten Code:

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine SVG-Daten-URL nicht als Pseudoelement-Hintergrund in Firefox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!