Chromium-Gecko-WebKit差异清单
版本数字会过期。下表记 机制差异，以你构建当天的 Chrome / Firefox / Safari / iOS Safari 实测为准。三项深挖见 SMIL、foreignObject 与文本。
探测写 detectSvgCaps()，不要 if (safari && version < 17)。
1. foreignObject
| 能力 | Chromium | Gecko | WebKit |
|---|---|---|---|
| inline SVG 里嵌 HTML | 可用 | 可用 | 可用，尺寸/overflow 边角多 |
独立 .svg 里的 HTML | 要 XHTML 命名空间 | 同 | 同；缺 xmlns 常空白 |
出现在 <use> 影子树 | 剥掉，不渲染 | 常能克隆 | 剥掉 |
| 宽高只写 CSS、不写属性 | 有时能排 | 更依赖属性 width/height | 属性缺失易塌 |
共同：<img> / CSS background 里的 foreignObject 不当可交互 HTML 用。用户上传必须剥 FO，见 08。
2. text 折行
| 项目 | 差异 |
|---|---|
SVG 2 inline-size | 三引擎 都未 当浏览器折行实现。设计工具能写，浏览器当没看见 |
<text> + white-space: pre + 源码换行 | Gecko 会折；Chromium / WebKit 通常仍一行 |
| 可移植折行 | 自己用 tspan + dy，或 inline 里 foreignObject + HTML（接受 FO 差异） |
getComputedTextLength / 中英混排 | 字体 fallback 宽度不能当快照金标，同 Canvas 文字 |
3. 外部 use
| 项目 | Chromium | Gecko | WebKit |
|---|---|---|---|
同文档 href="#id" | 稳 | 稳 | 稳 |
外部 href="sprite.svg#icon" | 同源或 CORS 常可用 | 可用，CORS 严 | 经常失败；iOS 更差 |
<use> 内再 FO / SMIL | FO 被剥；不要依赖 | 不要当可移植 | FO 被剥 |
生产图标：sprite inline 进文档 再 use，或直接 inline path。不要把跨文件 use 当唯一加载器。xlink:href 仅给旧文件；新代码 href。
4. getBBox 与描边
默认 getBBox() 是 填充几何，不含 stroke / markers（SVG 2 选项默认 stroke: false）。
| 引擎 | { stroke: true } |
|---|---|
| Chromium | 长期忽略或不全，当 fill 盒 |
| Gecko | 近年开始认 SVGBoundingBoxOptions |
| WebKit | 当 fill 盒 |
手柄、框选、虚拟化 AABB：自己用几何盒膨胀 stroke-width/2（再加 miter）。不要跨引擎对拍 ink 像素。clipped / markers 同样不能当可移植。元素 display: none 或不在树上时行为不稳定，见 绘制顺序。
5. CSS 几何属性
SVG 2 把 cx / cy / r / x / y / width / height / d 等做成几何属性，CSS 可覆盖 attribute。
| 项目 | Chromium | Gecko | WebKit |
|---|---|---|---|
cx / r 当 CSS 并动画 | 常见可用 | 常见可用 | 有，单位/动画边角 |
d 当 CSS | 较早 | 到得晚 | 不要默认能 morph |
| 无单位数字 | 属性 OK；CSS 有的引擎要单位 | CSS 常要单位 | 混 |
应用 UI 可移植通道仍是 transform 的 CSS / WAAPI。几何 CSS 当增强，写探测，失败则写 attribute。
6. SMIL 细节
三引擎 2026 都能跑 animate / animateTransform / animateMotion。Chromium 2015 弃用意向已于 2016 暂停。不要写「已死」。
| 项目 | 差异 |
|---|---|
自包含 + <img> | 三引擎都能跑文件内 SMIL；这是它的岗位 |
syncbase（begin="a.end"） | Gecko 最完整；Chromium 有历史边角 |
animateTransform vs CSS transform | 双通道会抢；生产只留一条 |
rotate="auto" motion | 大体可用；复杂 path / 反向要实测 |
应用 UI 仍优先 CSS / WAAPI。用户上传剥 SMIL，见 SMIL 与属性动画。
7. 其它会踩的
| 项目 | 差异 |
|---|---|
transform-box / origin | 必须显式写；默认从 0 0 向 HTML 中心靠，历史包袱还在 |
vector-effect | 生产只用 non-scaling-stroke；其余 SVG 2 at-risk |
| Android WebView | 随厂商内核，不能用 Chrome 版本号推断 |
失败形态
| 症状 | 原因 |
|---|---|
| 精灵图只在 Safari 空白 | 外部 <use href="file.svg#id">；应改同文档 sprite |
| 只有 Firefox 多行文字 | 把 Gecko white-space: pre 当成了 SVG 2 折行 |
| 手柄/框选比墨迹小一圈 | getBBox({ stroke: true }) 被忽略，当 fill 盒 |
| Chrome 圆会呼吸，Safari 不会 | r 当 CSS 动画，未探测、未降级写 attribute |
| 卡片 HTML 在 Chrome 消失、Firefox 还在 | foreignObject 进了 <use> 影子树 |
权威资料
- SVG 2 Editor’s Draft（2026-08-18）
- SVG 2 — getBBox
- blink-dev：SMIL 弃用意向暂停
- WebKit Feature Status
- Firefox Platform Status
核对日期：2026-08-26