path必须包裹在svg标签内才能渲染，否则仅为普通XML节点；d属性大小写混用会导致坐标基准突变；Z不校验首尾重合，浮点误差易致填充异常；复杂图形应拆解为defs+use复用。
path 标签本身不能单独渲染，必须包裹在 svg 标签内才有效——这是最常被忽略的前提，不是“怎么写得更漂亮”的问题，而是“为什么根本不出现在页面上”的根源。
为什么 path 写对了却看不见？
浏览器只识别顶层 svg 元素为绘图上下文；path 是子元素，脱离 svg 就是普通 XML 节点，不参与渲染。
- ❌ 错误示例：
<path d="M10 10 L90 10 Z"></path>（无svg包裹） - ❌ 错误示例：
<svg xmlns=""><path d="..."></svg>（空xmlns导致解析失败） - ✅ 正确写法：
<svg width="200" height="200"><path d="M10 10 L90 10 Z"></path></svg> -
width和height建议显式设置，否则部分浏览器按默认 300×150 渲染，可能造成缩放失真或坐标错位
d 属性里大小写混用会出什么问题？
大写命令（如 M、L、C）表示绝对坐标，小写（m、l、c）表示相对于上一个终点的偏移。混用时控制点计算基准突变，路径极易“飞出视口”。
- 比如
d="M100 100 C200 50 200 150 300 100 l-50 -50"：前半段贝塞尔曲线终点是 (300,100)，后接小写l，实际画的是从 (300,100) 到 (250,50) 的线——但人眼容易误以为l是相对原点 - 调试建议：初学阶段统一用大写命令，逻辑确认无误后再切小写压缩体积
- 工具导出路径后，注意检查是否混入意外的小写命令（某些 Sketch / Figma 插件默认输出小写）
闭合路径用 Z 为什么填充异常？
Z 只是画一条直线回到路径起点，它不校验起点和终点是否真正重合。浮点误差、手动输入偏差或工具导出精度不足，都会让 Z 强行补一条“不可见短线”，破坏填充逻辑或描边连续性。
- 典型问题：
d="M0 0 L100 0 L100 100 L0.0001 100 Z"——末尾的0.0001会让Z拉出一条极细横线，导致填充区域多出一条缝隙 - 解决方法：手写路径时确保首尾坐标完全一致；动态生成时用
parseFloat(val).toFixed(2)统一保留两位小数 - 不要依赖
Z自动修正——它没有这个能力
复杂图形别堆 path，用 <defs> + <use> 复用
一个地图轮廓或图标组件动辄上百个坐标，全塞进一个 d 字符串里既难读又难调。真正可维护的做法是拆解抽象，而非追求“一行写完”。
- 把箭头、齿轮齿、装饰弧线等固定结构抽成
<defs>中的<path id="arrow">，再用<use href="#arrow" transform="rotate(45)">复用 - 多个不相交区域可用一条
path表达：用M分隔子路径，每个子路径可独立Z闭合，减少 DOM 节点数 - 生成路径时优先输出带换行的格式（如
d="M10 10\nL20 10\nZ"），方便肉眼比对；上线前再压缩
path 的难点不在语法本身，而在坐标基准的隐式切换、浮点精度的无声渗透，以及复用意识的缺失——这些地方不踩坑，比写出更炫的曲线重要得多。 
