内联CSS中Inline SVG URL无法显示为背景图的问题求助

核心问题 #

你的内联CSS代码存在三个关键问题：

• url()中的data URI未用引号包裹，浏览器解析时会因特殊字符（单引号）提前截断
• SVG属性使用的单引号未正确编码，与HTML属性的引号规则冲突
• 容器未设置宽高，背景图无足够空间显示

修正后的代码 #

<div style="width: 100px; height: 100px; background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%2010%2010%22%3E%20%3Cpath%20d%3D%22M%2010%200%20L%200%2010%22%20fill%3D%22none%22%20stroke%3D%22red%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E')">rtrtfgf</div>

关键修改点 #

1. 给url()参数加单引号：由于整个style属性用双引号包裹，内部用单引号包裹data URI可避免解析冲突
2. 替换SVG属性的单引号为编码后的双引号：将原SVG中的'替换为URL编码的%22，彻底消除引号冲突
3. 添加宽高样式：确保容器有足够空间显示背景图（若内容高度足够可省略，但建议显式设置）

为什么外部CSS能生效？ #

外部CSS文件不受HTML属性的引号规则限制，你使用的未编码SVG（直接写<svg>标签）搭配utf8声明，浏览器能正确解析其中的单引号，因此可以正常显示。

内容的提问来源于stack exchange，提问作者10may