跳到主要内容

SVG 图形与绘制知识体系

面向已经会 DOM / TypeScript、但没把 SVG 当生产文档模型用过的前端。目标不是「会画一个 circle」，而是能在 viewBox、坐标系、命中、动画、节点成本和 XSS 这些条件下，把一棵矢量文档做成可控的编辑器或可视化。

不复述 MDN 元素清单。每节回答：机制是什么、什么时候适用、什么时候不适用、失败时长什么样。

示例默认是浏览器里的通用 TypeScript，不绑 React、Vue、小程序。框架只是宿主，命名空间、CTM 和命中不会因为你用了某个 UI 库而改变。

和 Canvas 图形与绘制知识体系 互补：Canvas 的真相是像素；SVG 的真相是文档节点。

1. 先建立的心智模型​

SVG 是 保留模式矢量文档：

XML/DOM 树（circle / path / g / text）
        ↓ 样式 + CTM
渲染器按树重绘
        ↓ CSS 盒里的 viewport
屏幕上的 <svg>

改 circle.cx，下一帧图形就在新位置。节点还在，所以命中可以走 DOM，无障碍可以挂 title / role，撤销可以是文档操作而不是像素回放。

因此工程上的真实工作不是记住 viewBox 四个数，而是：

  1. 管 viewport / viewBox / preserveAspectRatio 三者对齐。
  2. 管用户空间 ↔ 屏幕空间（getScreenCTM），而不是心算 transform。
  3. 管「几何命中」和「DOM 命中」什么时候一致、什么时候必须自己算。
  4. 管节点数量、滤镜光栅化和虚拟化，而不是默认 SVG 一定比 Canvas 慢或快。
  5. 管用户上传 / 导出时的 XSS 与序列化，而不是把 .svg 当无害图片。

2. 学习路径​

阶段学完后你能做什么章节
模型解释 viewBox 不是「画布尺寸」；能把 client 坐标变到局部用户空间01、05
封装用命名空间正确建树，path 可测长、可复用 &lt;use>，而不是 innerHTML 一锅炖02
交互相机缩放、命中、框选、HTML overlay、读屏03
运行时CSS/WAAPI/SMIL 各干各的；节点爆炸前能虚拟化04、06、07
决策这张图该用 SVG、Canvas、CSS 还是 D309
场景对着图标、图表、流程图、矢量白板直接开工10、场景对照

3. 模块清单​

目录内容
00-总览与学习路径能力分层、和 Canvas 体系的边界
01-文档模型viewport、viewBox、CTM、绘制顺序
02-标记与几何工程命名空间、path、文字、滤镜、use
03-交互与命中指针、getScreenCTM、相机、无障碍
04-动画与时序CSS、WAAPI、SMIL、路径描边
05-布局与缩放嵌入方式、preserveAspectRatio
06-性能与可观测节点成本、滤镜光栅、虚拟化
07-浏览器差异三引擎、SMIL、foreignObject、文本
08-安全与导出XSS 消毒、序列化、转位图
09-选型边界SVG vs Canvas vs CSS，自研 vs D3/svg.js
10-生产场景图标、图表、流程图、白板、地图、编辑器、打印

4. 通用判断原则​

  1. 先问有没有对象语义。 要选中、对齐、可访问树，优先 SVG/DOM；要像素笔刷、滤镜烘焙、视频帧，走 Canvas。
  2. 文档是 source of truth。 不要从光栅截图反推节点；导出位图只是投影。
  3. CTM 是第一公民。 命中、overlay、打印裁切，全部经 getScreenCTM / 自己的相机矩阵，不要用 offsetX 碰运气。
  4. 节点数是架构决策。 几千个独立 path 就要测 layout/paint；不要等掉帧再「优化一下 CSS」。
  5. 用户 SVG 等于用户 HTML。 能 inline 就能跑脚本。<img> 沙箱和消毒过的 inline 是两条产品线。

5. 权威资料​

核对日期：2026-08-26