前端设计 · 知识地图¶
「前端设计」收录动手改 / 看得见摸得着的那部分前端知识：矢量图（SVG）、页面结构（HTML）、样式（CSS）、交互（JavaScript）。
SVG 动手区以一篇 SVG 入门：读图与制作 开篇——读图、语法、制作一条龙；其余各页是围绕「改图」的专题。
| 你想干什么 | 去哪儿 |
|---|---|
| 「系统入门 SVG / 查语法 / 学画图」 | SVG 入门：读图与制作（读图四步 → 语法字典 → 制作实战，在 技术与编程 → 前端设计 → SVG） |
| 「我手上有一张图，要把它改成我想要的样子」 | 本区 · SVG 动手区 ↓ |
一句话区分：写语法的能力在开篇长文里打底，「改图」是另一项独立技能——它需要读图能力、坐标直觉和对「改一处会牵动哪些地方」的预判，这正是动手区各专题页要练的。
📌 SVG 动手区¶
- SVG 动手区 — 入口索引，含「我该改哪儿」决策树
- SVG 入门：读图与制作 — 动手区第一篇：读图四步 → 语法字典 → 制作实战
- 改图的六种常见手术 — 增 / 删 / 改 / 挪 / 换色 / 抽图元的标准化操作
- 把 AI 生成的 SVG 改成可维护的 — 接手 AI 图：清冗余 → 查语义 → 改可维护的完整流程
- 实战 · DW01 电路图改图复盘 — 一张电路图反复修改的完整过程与教训
- 亮暗双主题与 MkDocs 嵌入 —
currentColor、CSS 变量、路径编码坑 - SVG 排错清单 — 症状 → 原因 → 解法的对照表
- SVG 术语速查 — 高频属性 / 元素一词一解，配最小示例
🧱 HTML¶
待补。规划方向：语义化标签选型、文档结构骨架、
<head>里该放什么。
🎨 CSS¶
待补。规划方向：盒模型与层叠、Flex / Grid 布局取舍、变量与主题切换。
⚡ JavaScript¶
待补。规划方向：DOM 增删改查、事件与监听、用 JS 动态重绘 SVG。