svg的d属性是路径指令流而非画图界面，必须以m/m开头、用z显式闭合才能形成封闭图形并支持fill，大小写混用会改变坐标参考系，空格与逗号分隔需规范，否则路径可能不显示或断裂。
SVG <path></path> 的 d 属性不是“画图界面”，而是指令流；M、L、Z 是最基础且高频的三个命令，但写错空格、大小写或漏 Z，路径就可能不闭合、不显示、或变成两段断开线。
为什么 M 10 10 L 30 10 L 30 40 没有三角形？
因为没闭合——Z 不是可选的“优化项”，而是显式指令。没有它，浏览器只画两条线段：从 (10,10) → (30,10)，再 → (30,40)，终点停在 (30,40)，不会自动连回起点。
常见误判是以为“首尾坐标一致就能闭合”，但 SVG 不做坐标比对，只认有没有 Z。
-
M 10 10 L 30 10 L 30 40 Z→ 正确闭合三角形（自动加线回 (10,10)） -
M 10 10 L 30 10 L 30 40→ 开放折线，填充色无效（fill需封闭区域才生效） - 若想用
fill上色，必须确保路径封闭，且fill值不是none或transparent
M 和 L 能否混用大小写？比如 M 10 10 l 20 0
可以，但后果明确：大写 M 是绝对坐标，小写 l 是相对坐标，参考点是上一个命令的终点。M 10 10 l 20 0 等价于 M 10 10 L 30 10；但 m 10 10 L 20 0 会先相对移动到 (10,10)，再绝对画到 (20,0)，起点混乱，极易出错。
- 初学者建议全程用大写：
M、L、Z，避免参考系跳变 - 多个
M允许共存，每个都开启新子路径：M 10 10 L 30 10 M 50 10 L 70 10生成两条独立线段 - 坐标间允许空格或逗号，但别混用：
M10,20L30,40合法，M10,20 L30,40也合法；M10,20L 30,40中空格位置异常，部分解析器可能截断
动态创建 <path></path> 时，document.createElement("path") 为什么不渲染？
因为生成的是 HTML 元素，不是 SVG 元素——浏览器忽略它。
SVG 元素必须带命名空间，否则 DOM 认为它是非法标签，不参与 SVG 渲染管线。
- 正确写法：
document.createElementNS("http://www.w3.org/2000/svg", "path") - 后续设属性必须用
setAttribute()，不能直接赋值：path.setAttribute("d", "M10 10 L30 10 Z") - 插入 DOM 后，如需获取长度：
path.getTotalLength()必须等 layout 触发，稳妥做法是放在requestAnimationFrame回调里调用
调试 d 值不可见？先查这三处
90% 的“路径不显示”问题和 d 写错无关，而是容器或样式链断裂：
- 父
<svg></svg>缺viewBox或宽高为 0 —— 路径坐标存在，但被裁掉或缩成点 -
fill="none"且没设stroke—— 路径存在但完全透明；加stroke="red" stroke-width="2"立刻验证 - 路径坐标超出可视区，例如
viewBox="0 0 100 100"却写了M 200 200—— 移动viewBox或缩放坐标更可靠
真正复杂的路径别手敲；用 Figma 导出或 SVG Path Editor 实时拖拽生成 d，再微调——M/L/Z 是骨架，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
