SVG图形必须包裹在<svg>标签内才能渲染，<path>单独存在无效；d属性需注意大小写命令差异、Z闭合精度及路径可维护性。
直接把 <path> 放进 <svg> 标签里就能用，不需要额外“嵌套”逻辑；所谓“复杂几何图形”，本质是路径命令组合得当，不是靠多层标签堆出来的。
必须包裹在 <svg> 标签内才能渲染
浏览器只认顶层 <svg> 为绘图上下文，<path> 单独写在 HTML 里不会显示。常见错误是漏掉 <svg> 或写错命名空间。
- ✅ 正确写法：
<svg width="200" height="200"><path d="M10 10 L90 10 Z"></svg> - ❌ 错误写法：
<path d="...">（无<svg>）、或写成<svg xmlns="">（空命名空间导致 SVG 解析失败） -
width和height属性建议显式设置，否则部分浏览器可能按 300×150 默认尺寸渲染，造成缩放失真
d 属性里大小写混用要小心：绝对 vs 相对坐标
同一个路径中可以混用大写（绝对）和小写（相对）命令，但控制点位置会因基准点不同而偏移——这是调试时最常卡住的地方。
-
M100 100 L200 100：从 (100,100) 画线到 (200,100) -
m100 100 l100 0：先相对移动到 (100,100)，再相对画线 (100,0) → 实际终点是 (200,100)，但起点是 (0,0) 偏移后的点 - 贝塞尔曲线尤其敏感：
C的两个控制点和终点都是绝对坐标；c则全按当前点偏移计算，稍不注意就飞出视口 - 建议初学阶段统一用大写命令，确认逻辑后再切小写优化代码长度
闭合路径用 Z，但别指望它自动修正坐标精度
Z 的作用只是画一条直线回起点，它不校验起点和终点是否重合。如果路径最后一点因浮点运算或手动输入有微小偏差，Z 会强行拉一条短线补上，导致填充异常或描边错位。
- 比如
d="M0 0 L100 0 L100 100 L0.0001 100 Z"，末尾的0.0001会让Z拉出一条极细横线 - 解决方法：手写路径时确保首尾坐标完全一致；用工具导出路径后，可用正则
/\s+Z\s*$/i去掉末尾空格再检查 - 若需动态生成路径，用
parseFloat()统一保留 2 位小数，避免 JS 浮点误差渗入d字符串
复杂图形≠堆砌命令，而是分段 + 复用 + 可读性
一个心形或地图轮廓动辄上百个坐标，硬写在 d 里既难调又难维护。真正实用的做法是拆解、抽象、复用。
- 用
<defs>+<use>复用子路径：<defs><path id="arrow-head" d="M0 0 L10 5 L0 10 Z"/></defs>，后面用<use href="#arrow-head" transform="rotate(45)"/> - 多个不相交区域可写成一条
<path>中的多个子路径，用M分隔，每个子路径可单独Z闭合 - 生成路径时优先输出带空格/换行的格式（如
d="M10 10\nL20 10\nZ"），方便肉眼比对，上线前再压缩
路径越复杂，越要警惕坐标系原点偏移、单位缺失、以及浏览器对超长 d 字符串的解析截断（某些旧版 Safari 对单个 d 值长度有限制）。别迷信“画出来就行”，得让下一个人能看懂、改得动、缩放不失真。
