SVG 还缺什么
前面各页讲的都是浏览器里已经跑得通的机制，也就是 SVG 在「能被 CSS 驱动」这件事上做得到的部分。本页换个视角：Patrick Brosset 综合 Chromium bug tracker 高票 issue、Interop 提案、State of CSS 2025 调查与社媒反馈，整理出开发者眼中 SVG 仍然缺失的若干能力（见 What's missing from SVG）。其中能在浏览器里当场实测的两项（文本换行、stroke 对齐）做成了下面的 demo，其余偏机制层面的缺口随后罗列。
建议 · 读这份清单前先分清哪些是本系列已经解释过的。文章列出的若干诉求，本系列其他页已正面讲过——外部 SVG 资源主题化见 param() 提案，响应式尺寸与 viewBox 见 viewBox 相机，<use> 复用与 shadow
边界见嵌入矩阵，z-index 缺失见嵌入矩阵的反直觉特性。本页只补上那些现有机制无法解释、确实还缺的部分。
1 · 文本排版不会自动换行
SVG 的 <text> 把整段文字画成一条不折行的线：超出边界既不换行也不省略，要分行只能手动拆成多个 <tspan> 并逐行算 y。这让本地化（不同语言长度不一）与无障碍都相当困难。目前唯一可靠的「框内可换行文本」办法，是把一段 HTML 塞进
<foreignObject> 借用 CSS 的换行能力。
警示 · <foreignObject> 自身也在缺口清单上。它能把可换行的 HTML 嵌进 SVG，却长期被 interop 问题困扰：transform 下的定位、裁剪、在不同引擎里的渲染差异都不一致，因此很多人不敢在生产里依赖它。图 1-1 右侧的渲染结果由当前浏览器实测得出（探针见
verdict），换个引擎未必一致。
2 · stroke 只有居中对齐
SVG 的描边永远骑在路径中线上——一半在形状内、一半在形状外。设计工具（Figma、Illustrator）和 CSS border 都能选 inside、center、outside，SVG 却只给 center 一种，且没有多重描边。想要内描边或外描边，只能靠 clipPath 与 mask 把多出来的一半切掉。
注 · 这两种模拟都是 hack：inside 把描边宽度翻倍、再用形状自身作 clip-path 裁掉外半；outside 用 mask 挖掉内部区域只留外半。两者都得多写一个 <clipPath> 或 <mask>，且圆角、自交、虚线等情形容易出错。曾有
stroke-alignment 的提案，在 SVG2 草案阶段引入又移除，至今没有原生属性（核对于 2026-08）。
3 · 其余机制层面的缺口
下面几项更深、难用一个小 demo 说清，文章把它们列为 SVG 当前主要的演进方向。
| 缺口 | 开发者痛点 | 现状 / 方向 |
|---|---|---|
| 性能可预期性 | filter、大量节点、动画的渲染开销不透明，担心耗电而主动回避 SVG 特性。 | 缺保证 |
| 动画与 morphing | 路径与形状插值难写；SMIL 半废弃、CSS 能力有限，实务多依赖 JS 库。 | 演进中 |
| geometry 与可编程性 | path 数据的解析与操作缺现代 API；多重描边、stroke 对齐同属此类。 | 部分提案 |
| 复杂图形无障碍 | ARIA graphics roles 支持不一致，图表与信息图的语义关系难表达，常靠 workaround。 | 支持不一 |
| 一致的 CSS 集成 | 期望 z-index、calc()、filter、blend mode 等在 SVG 内与普通 CSS 行为一致。 |
逐步对齐 |
| interop 与演进 | 长期 spec 缺口与实现差异侵蚀开发者对平台的信任，需要可见的进展。 | Interop 项目 |
数据来源：Chromium bug tracker 高票 issue、Interop 提案、State of CSS 2025、社媒反馈，由 Patrick Brosset 综合整理。