浏览器差异

三引擎都画 SVG，会炸生产的是边角：foreignObject、文本折行、外部 use、getBBox 是否含描边、几何属性当不当 CSS、SMIL 时间图细节。版本数字会过期。清单记机制，落地用当前目标浏览器实测。

展开见 SMIL、foreignObject 与文本。不要为特定 WebView 壳单独开第三条主路径——当内核差异附录即可。

文档清单

文档	解决的问题
Chromium Gecko WebKit 差异清单	工程上会踩的对照表
SMIL、foreignObject 与文本	这三项的失败形态单独展开

原则

能力探测写 一次运行时，不要维护「Safari 某版本不行」口诀。本章解释 为什么探测会失败。SMIL 三引擎 2026 仍可用；应用 UI 仍优先 CSS / WAAPI。

export interface SvgCaps {
  cssRadius: boolean;
  bboxStroke: boolean;
}

export function detectSvgCaps(svg: SVGSVGElement): SvgCaps {
  const c = svg.ownerDocument.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle",
  );
  c.setAttribute("cx", "40");
  c.setAttribute("cy", "40");
  c.setAttribute("r", "10");
  c.setAttribute("stroke", "#000");
  c.setAttribute("stroke-width", "10");
  svg.append(c);

  c.style.setProperty("r", "20px");
  const cssRadius = c.getBBox().width >= 39;

  const fillBox = c.getBBox();
  const strokeBox = c.getBBox({ stroke: true, fill: true });
  const bboxStroke = strokeBox.width > fillBox.width + 1;

  c.remove();
  return { cssRadius, bboxStroke };
}

getBBox 方法存在不等于认 options。Android WebView 不能用桌面 Chrome 版本号推断。

适用 / 不适用

适用	不适用
解释跨引擎测失败的机制	当 caniuse 全文转载
编辑器 / 可视化的兼容基线	用 UA 字符串分支业务逻辑

失败形态

症状	原因
只在 Safari 丢一块 HTML	`foreignObject` 进了 `<use>`，或宽高没写属性
只在 Firefox 文字折了	误把 Gecko 的 `white-space: pre` 当 SVG 2 `inline-size`
手柄盒不含描边	`getBBox({ stroke: true })` 被忽略

权威资料

核对日期：2026-08-26

文档清单​

原则​

适用 / 不适用​

失败形态​

权威资料​

文档清单

原则

适用 / 不适用

失败形态

权威资料