CSS中内联SVG作为div背景不生效问题求助

嘿，我帮你定位到问题啦！你的SVG本身没问题，但作为data URI背景时，有两个关键细节没处理到位，导致浏览器无法正确渲染。下面是修正后的代码和原因说明：

修正后的可运行代码 #

#bgr {
  width: 500px;
  height: 500px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" fill="red"/></svg>');
}

<div id="bgr"></div>

核心修改点 #

• 添加SVG标准命名空间：给<svg>标签加上xmlns="http://www.w3.org/2000/svg"，这是SVG的必填属性之一，缺少它的话，部分浏览器会把SVG当作普通XML元素，无法识别图形内容。
• 简化填充属性写法：把<path>里的style="fill:red;"改成直接的fill="red"，虽然单引号包裹的URL理论上允许内部嵌套双引号，但这种写法能避免潜在的字符串解析冲突，让代码更稳定。

如果之后你的SVG里出现#、&这类特殊字符，记得要做URL转义（比如#转成%23），不过这次你的代码里没有这类情况，所以不用额外处理。

现在用修正后的代码，div的背景应该就能正常显示红色的SVG图形啦！

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