Why Doesn't My SVG Data URL Work as a Pseudo-Element Background in Firefox?

SVG Data Image Not Functioning as a Background-Image in a Pseudo Element

In some circumstances, setting an SVG as the background-image for a pseudo element using a data:image/svg xml URL may not render in Firefox. This occurs because the # character in the URL is interpreted as the start of a fragment identifier.

Encoding the Data URL

To resolve this issue and allow the SVG to display in Firefox, it is necessary to encode the data URL contents. This involves converting any hash (#) characters within the data URL to #.

Here's an example of the modified code:

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

The above is the detailed content of Why Doesn't My SVG Data URL Work as a Pseudo-Element Background in Firefox?. For more information, please follow other related articles on the PHP Chinese website!