Warum wird das Hintergrundbild meiner SVG-Daten-URL in Firefox nicht angezeigt?

SVG-Daten-URL-Hintergrundbild wird in Firefox nicht angezeigt

Beim Festlegen einer SVG-Datei als Hintergrundbild unter Verwendung einer Daten-URL in einem Pseudo -Element wird das Bild nicht in Firefox angezeigt. Dies liegt daran, dass Firefox das „#“-Zeichen in der URL als Anfang einer Fragmentkennung behandelt.

Um dieses Problem zu beheben, müssen die Daten-URL-Inhalte URL-codiert sein. Dabei werden alle „#“-Zeichen in „#“ umgewandelt. Der modifizierte CSS-Code unten enthält die URL-Kodierung:

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">

Durch die URL-Kodierung der Daten-URL-Inhalte interpretiert Firefox die Hash-Zeichen korrekt als Teil der SVG-Daten, sodass das Bild als Hintergrund angezeigt werden kann.

Das obige ist der detaillierte Inhalt vonWarum wird das Hintergrundbild meiner SVG-Daten-URL in Firefox nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!