首页 > web前端 > css教程 > 为什么我的 SVG 数据 URL 背景图像在 Firefox 中不显示?

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

Barbara Streisand
发布: 2024-12-25 21:07:11
原创
219 人浏览过

Why Doesn't My SVG Data URL Background Image Display in 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板