CSS中Data URI形式SVG图标浏览器不显示问题求助

API 探路者

2026-6-18

问题原因与修复方案

核心问题

你的SVG作为Data URI背景不显示的原因有两个：

#符号未转义：SVG中clip-path="url(#a)"里的#在URL中属于片段标识符，浏览器会将其之后的内容视为锚点而非SVG代码的一部分，导致clipPath引用失效，SVG无法正确渲染。
缺少编码声明：Data URI未明确指定UTF-8编码，部分浏览器可能对SVG字符解析异常。

修复后的代码

ul.custom li:before {
    content: '';
    position: absolute;
    height: 23px;
    width: 23px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="none"><g fill="#CC902D" clip-path="url(%23a)"><path d="M10.748 16.251a.65.65 0 0 1-.461-.191l-4.53-4.54a.652.652 0 0 1 0-.922l2.165-2.165a.652.652 0 0 1 .46-.19h.001a.65.65 0 0 1 .461.191l1.905 1.913 3.408-3.408a.652.652 0 0 1 .921 0l2.165 2.165a.652.652 0 0 1 0 .921l-6.035 6.036a.651.651 0 0 1-.46.19Zm-3.61-5.191 3.61 3.618 5.114-5.113-1.244-1.244-3.41 3.41a.652.652 0 0 1-.46.19h-.001a.65.65 0 0 1-.461-.191L8.38 9.816 7.138 11.06Z"/><path d="M22.349 23H.65A.651.651 0 0 1 0 22.349V.65C0 .291.292 0 .651 0h21.697c.36 0 .652.292.652.651v17.302a.651.651 0 1 1-1.303 0V1.303H1.303v20.394h21.045a.651.651 0 1 1 0 1.303Z"/><path d="M19.184 19.836H3.815a.651.651 0 0 1-.651-.651V6.929a.651.651 0 1 1 1.303 0v11.604h14.066V4.467H3.815a.651.651 0 1 1 0-1.303h15.37c.36 0 .65.292.65.652v15.369c0 .36-.29.651-.65.651Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h23v23H0z"/></clipPath></defs></svg>');
}