SVG中<use href="#icon">被base标签改写成完整URL，因base将纯相对路径#icon拼接到base href后导致404；仅<use href="#icon">和<use xlink:href="#icon">受影响，根相对或外部SVG引用不受影响。
SVG
base 标签会把 SVG 内部 <use href="#icon"> 这种纯相对路径（既无协议、也无 / 开头）当成需要解析的相对 URL，直接拼接到 base href 值后面。结果不是找当前页面里的 <symbol id="icon">，而是发起一个对类似 https://cdn.example.com/v3/#icon 的请求——这显然 404，且浏览器不报错，只静默失败。
哪些 SVG 场景真受影响，哪些完全绕过 base
base 只在 HTML 解析阶段介入，且仅作用于“硬编码在 HTML 属性中”的纯相对路径。它对 SVG 内容的处理有明确边界：
-
<use href="#icon">✅ 生效：href 是 HTML 属性，值为纯相对路径，被 base 拼接 -
<use xlink:href="#icon">✅ 同样生效（xlink:href 已废弃但仍被解析） -
<svg><use href="/icons.svg#icon"></svg>❌ 不生效：/icons.svg 是根相对路径，base 不接管 -
<img src="icon.svg">中的 SVG 内容 ❌ 不生效：base 不解析外部文件内容 - CSS 里
background: url("icon.svg#icon")❌ 不生效：CSS url() 是运行时行为，base 无权干预
修复 SVG
不能删 base（比如 CDN 资源统一托管必须用），就得绕开它的解析逻辑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把
href="#icon"改成绝对路径引用：例如href="/assets/sprite.svg#icon"—— 开头带 /，base 直接跳过 - 用 JS 动态设置：在 DOM 加载后执行
document.querySelectorAll('use[href^="#"]').forEach(u => u.setAttribute('href', u.getAttribute('href')))，强制重置为当前文档上下文（注意：仅对内联 SVG 有效） - 改用
<svg><use href="data:text/html,<svg><symbol id="icon">...</symbol></svg>#icon">这类 data URL 方式（极少见，仅作技术提示）
最容易被忽略的兼容性坑：Firefox 对末尾斜杠的截断
如果你的 base href="/icons/" 少了末尾斜杠，在 Firefox 里 <use href="#icon"> 会被错误拼成 /icons#icon，而不是预期的 /icons/#icon —— 导致浏览器尝试加载 /icons#icon 这个不存在的资源，而非定位到页面内 ID。这个现象在 Chrome 里不明显，但 Firefox 和 Opera 会真实发生，且 Network 面板里能看到一次状态码 200 的空响应（返回的是整个 HTML 页面），而不是 404。
立即学习“前端免费学习笔记（深入）”；
