Why Doesn't My SVG Data URL Background Image Display in Firefox?

SVG Data URL Background-Image Not Displaying in Firefox

When setting an SVG as a background-image using a data URL in a pseudo element, the image fails to appear in Firefox. This is because Firefox treats the '#' character in the URL as the beginning of a fragment identifier.

To resolve this issue, the data URL contents must be URL encoded. This involves converting any '#' characters to '#'. The modified CSS code below incorporates the URL encoding:

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

By URL encoding the data URL contents, Firefox correctly interprets the hash characters as part of the SVG data, allowing the image to be displayed as the background.

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