为什么我的 SVG 数据 URL 背景图像在 Firefox 中不显示？

SVG 数据 URL 背景图像在 Firefox 中不显示

使用伪数据 URL 将 SVG 设置为背景图像时元素，图像无法在 Firefox 中显示。这是因为 Firefox 将 URL 中的“#”字符视为片段标识符的开头。

要解决此问题，数据 URL 内容必须进行 URL 编码。这涉及将所有“#”字符转换为“#”。下面修改后的 CSS 代码合并了 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">

通过对数据 URL 内容进行 URL 编码，Firefox 可以正确地将哈希字符解释为 SVG 数据的一部分，从而允许图像显示为背景。

以上是为什么我的 SVG 数据 URL 背景图像在 Firefox 中不显示？的详细内容。更多信息请关注PHP中文网其他相关文章！