svg的d属性是浏览器逐字符解析的指令流，必须以m/m开头，否则路径静默不渲染；大小写区分绝对/相对坐标，空格分隔指令、逗号分隔坐标对，z仅闭合至首个m点。
SVG 的 d 属性不是“可自由编辑的字符串”，而是浏览器逐字符解析的指令流；写错一个字母、漏一个空格、大小写混用，路径就可能完全不显示、缩成一个点，或静默跳过后续命令——它不会报错，只会渲染出意外结果。
为什么什么也不显示？
因为所有路径必须以 M 或 m（moveto）开头，否则整条指令被忽略。没有起始点，后续任何 L、C、A 都无从执行。
-
L 10 10单独出现 → 浏览器直接跳过，控制台零提示，DOM 中元素存在但不可见 -
M 0 0 L 10 10→ 正确：先定位到 (0,0)，再画线到 (10,10) - 动态拼接时容易漏掉初始
M，比如条件分支未覆盖默认路径，输出空字符串或纯L指令 - 工具导出的
d值通常带M，但手动微调后删掉首字母是常见失误
空格、逗号、大小写怎么写才安全？
解析器按空格切分指令 token，再对每个 token 内部按逗号拆坐标；大小写决定坐标系参考点，混用不报错但极易误判“当前点”。
- 推荐写法：
M 10,20 L 50,60 C 30,100 70,120 100,80（指令后空格 + 坐标内逗号） - 危险写法：
M10,20L50,60在旧版 Safari 可能解析失败；M10 20L 50 60中M10被当指令名，数字 10 被丢弃 -
M和l混用合法但高危：M 10,10 l 20,0等价于M 10,10 L 30,10；但若前面有m 5,5，再跟L 20,0就会从 (5,5) 绝对跳到 (20,0)，路径断裂 - 初学者全程用大写：
M、L、Z，避免参考点突变
闭合路径为什么加了Z还是没填充？
Z 是显式闭合指令，不是“自动检测首尾重合”。但它只连回**上一个 M 的起点**，且不接受任何参数；多写坐标、漏 fill、坐标超 viewBox 都会导致填充失效。
-
M 10 10 L 30 10 L 30 40 Z→ 正确闭合三角形，fill生效 -
M 10 10 L 30 10 L 30 40（无Z）→ 开放折线，fill被忽略（SVG 不填开放区域） -
M 10 10 L 30 10 Z L 50 50 Z→ 第二个Z无效，但可能掩盖逻辑错误（如重复闭合函数调用） -
fill="none"是默认值，必须显式设为fill="#ff0"或fill="orange"才可见 - 若路径坐标远大于
viewBox范围（如viewBox="0 0 100 100"却写M 200 200），图形被裁剪，加stroke也看不到
A 命令画弧为什么总出错？
A 是唯一原生支持椭圆弧的命令，但参数多、逻辑强耦合：起点由前序命令提供，终点与半径距离不能超限，large-arc 和 sweep 共同决定四分之一圆弧选哪一段——错一个就画成直线或消失。
- 必须前置
M或L明确起点：M 100 100 A 50 50 0 1 1 100 200（半圆） - 起点和终点距离 > 2×半径 → 解析静默失败（不报错，也不画）
-
large-arc=0表示 ≤180° 弧，sweep=1表示顺时针；组合 (0,1)、(0,0)、(1,1)、(1,0) 对应四条不同弧线 - 别用 4 段
C拟合圆——控制点系数 0.551915 很难手算；A更简洁准确 - 调试技巧：先把
stroke="red" stroke-width="2" fill="none"加上，确保描边可见，再调参数
真正难的不是记住所有命令，而是理解每个字符执行后“当前点”的位置——它不显示、不报错，但决定下一条指令从哪开始。哪怕最简单的 M 10 10 L 20 20 Z，少一个空格或错一个大小写，整个路径就断在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
