chrome中base标签会导致svg的url(#id)解析失败，因其错误将片段标识符当作绝对url拼接；firefox和safari无此问题；临时方案是改用url(/#id)或url(./#id)，但根本解法是避免在含复杂svg的页面使用base。
Chrome中base标签会让url(#filter)失效
这是个真实存在的浏览器兼容性问题，仅在 Chrome（含基于 Chromium 的 Edge、Opera 等）中触发，Firefox 和 Safari 均不受影响。只要页面中存在带 href 属性的 <base> 标签，SVG 内部引用（如滤镜、渐变、剪裁路径）使用的 url(#id) 就会解析失败，导致视觉效果丢失——比如模糊、阴影、mask 全部不渲染。
- 典型表现：
<filter id="blur">...</filter>定义完好，但<rect filter="url(#blur)"></rect>不生效，DevTools 中该元素的filter计算值为空 - 根本原因：Chrome 在解析 SVG 的
url(#id)时，错误地将<base href>当作基准去拼接片段标识符，把url(#blur)当成了url(https://example.com/#blur)这类非法地址，直接丢弃 - 临时绕过方式：把
url(#blur)改成url(/#blur)或url(./#blur)，强制变成根相对或同目录相对路径，可恢复识别（但破坏语义且不通用）
<base>对<svg></svg>内use、image等外部引用的影响
<use href="#icon"></use> 和 <image xlink:href="logo.svg"></image>（或现代 href="logo.svg"）的行为完全不同：前者是文档内 ID 引用，不受 <base> 影响；后者是资源加载，受 <base> 控制。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<use href="#mySymbol"></use>→ 永远只查当前文档内的 ID，<base>对它完全无效 -
<image href="assets/icon.svg"></image>→ 会被重写为base.href + "assets/icon.svg"，若 base 是/app/，则请求/app/assets/icon.svg -
<image href="/assets/icon.svg"></image>→ 根相对路径，跳过<base>，直接请求/assets/icon.svg - 注意：
xlink:href已废弃，在现代 HTML 中应统一用href，且两者在 base 下行为一致
CSS 中background-image: url()与 SVG <image></image>的解析差异
同一个 URL 字符串，在 CSS 的 url() 和 SVG 的 <image href></image> 中，是否受 <base> 影响，取决于它出现的位置和上下文——不是“SVG 就一定受影响”，而是“谁在解析它”。
- CSS 文件里的
background-image: url(icon.svg)→ 解析主体是 CSS 引擎，**不受<base>影响**，路径始终相对于该 CSS 文件所在位置 - HTML 中内联 style：
<div style="background-image: url(icon.svg)"> → 解析主体仍是 CSS 引擎，**同样不受 <code><base>影响** - HTML 中
<image href="icon.svg"></image>→ 解析主体是 HTML 解析器，**受<base>影响** - 所以，即使你把 SVG 图标同时用作 CSS 背景和
<image></image>，它们的加载路径也可能完全不同 - 避免在含复杂 SVG 的页面中使用
<base href>，改用绝对路径或根相对路径硬编码资源（如<img src="/static/logo.png">） - 若必须用
<base>（如部署到子路径的 SPA），优先将 SVG 内联进 HTML，避免外部<image></image>和跨文件引用 - 对关键滤镜/渐变，用
<defs></defs>内联定义，并确保所有<use></use>和引用都在同一文档内，不依赖url(#id)的运行时解析 - 上线前务必在 Chrome DevTools 的 Network 面板中检查 SVG 相关请求——如果看到
url(#xxx)被发起为网络请求（状态码 404 或 pending），就说明 base 已干扰解析逻辑
如何安全使用<base>又不破坏 SVG 功能
最稳妥的做法不是“修 SVG”，而是从源头控制 <base> 的适用范围。因为 SVG 内部引用（url(#id)、<use></use>）本质依赖文档结构，而 <base> 是 HTML 解析层的全局劫持，二者底层机制冲突。
url(#id) 的误解析不是规范行为，也无标准修复时间表。这意味着，只要页面用了 <base>，SVG 内部引用就始终处于风险之中，不能靠“测试一次没问题”来担保。
