标记与几何工程
把 SVG 当成 可序列化的 DOM 树 来建：命名空间、属性写入、几何测量、复用和嵌入。不要把 innerHTML 当场景图 API。
坐标系、CTM、绘制顺序见 01 文档模型。命中、相机、overlay 见 03 交互与命中。
这一章覆盖什么
- 在 HTML 文档里正确创建 SVG 节点
- path 测长、规范化、基本形状何时换成 path
- 渐变 / pattern / 滤镜的坐标系与光栅代价
- clipPath、mask、marker 的职责边界
symbol/use、foreignObject
文档清单
| 文档 | 解决的问题 |
|---|---|
| 创建元素与命名空间 | SVG_NS、innerHTML vs createElementNS、baseVal |
| 路径几何与测量 | d、getTotalLength、pathLength、getBBox |
| 形状文字与图像 | 基本形状、text 不折行、image CORS、currentColor |
| 渐变 Pattern 与滤镜 | objectBoundingBox 零尺寸、滤镜光栅化 |
| clipPath-mask 与 marker | 硬裁 vs 软遮罩；marker 坐标系；clip 不是布尔运算 |
| 符号复用与 use | shadow tree、外部 use 的 CORS；inline sprite |
| foreignObject 与 HTML 嵌入 | 真 HTML / IME；Safari；尺寸必须显式 |
封装底线
- 创建走
document.createElementNS("http://www.w3.org/2000/svg", name)。HTML 文档里createElement("circle")不是 SVG 元素。 - 新代码用
href，不要写xlink:href。 - 几何测量前把要测的形状规范化成
path，不要赌三引擎对rect的getTotalLength一致。 - 复用默认 同文档 inline sprite，不要把外部
use当生产默认。 vector-effect生产只用non-scaling-stroke。
权威资料
- SVG 2 Editor’s Draft（2026-08-18）
- SVG 2 — DOM interfaces
核对日期：2026-08-26