svg中被base标签改写成完整url，因base将纯相对路径#icon拼接到base href后导致404；仅和受影响，根相对或外部svg引用不受影响。
SVG
base 标签会把 SVG 内部 <use href="#icon"></use> 这种纯相对路径（既无协议、也无 / 开头）当成需要解析的相对 URL，直接拼接到 base href 值后面。结果不是找当前页面里的 <symbol id="icon"></symbol>，而是发起一个对类似 https://cdn.example.com/v3/#icon 的请求——这显然 404，且浏览器不报错，只静默失败。
哪些 SVG 场景真受影响，哪些完全绕过 base
base 只在 HTML 解析阶段介入，且仅作用于“硬编码在 HTML 属性中”的纯相对路径。它对 SVG 内容的处理有明确边界：
-
<use href="#icon"></use>✅ 生效：href 是 HTML 属性，值为纯相对路径，被 base 拼接 -
<use xlink:href="#icon"></use>✅ 同样生效（xlink:href 已废弃但仍被解析） -
<svg><use href="/icons.svg#icon"></use></svg>❌ 不生效：/icons.svg 是根相对路径，base 不接管 -
<img src="icon.svg">中的 SVG 内容 ❌ 不生效：base 不解析外部文件内容 - CSS 里
background: url("icon.svg#icon")❌ 不生效：CSS url() 是运行时行为，base 无权干预
修复 SVG
不能删 base（比如 CDN 资源统一托管必须用），就得绕开它的解析逻辑：
- 把
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%20id='icon'>...</symbol></svg>#icon"></use></svg>这类 data URL 方式（极少见，仅作技术提示）
最容易被忽略的兼容性坑：Firefox 对末尾斜杠的截断
如果你的 base href="/icons/" 少了末尾斜杠，在 Firefox 里 <use href="#icon"></use> 会被错误拼成 /icons#icon，而不是预期的 /icons/#icon —— 导致浏览器尝试加载 /icons#icon 这个不存在的资源，而非定位到页面内 ID。这个现象在 Chrome 里不明显，但 Firefox 和 Opera 会真实发生，且 Network 面板里能看到一次状态码 200 的空响应（返回的是整个 HTML 页面），而不是 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
