svg的d属性专用于定义路径几何形状，大小写区分绝对与相对坐标，逗号仅用于坐标对内分隔，空格承担主要分隔作用，必须以m/m开头，否则路径静默不渲染。
SVG 的 d 属性不是“设置动画时长”或“传系统参数”，它专用于定义路径的几何形状——写错一个字母、漏掉一个空格，路径就可能完全消失或扭曲成意料之外的样子。
为什么 d 字符串里大小写不能混用
大写指令（如 M、L、C）表示绝对坐标，小写（m、l、c）表示相对坐标。它们的计算起点完全不同：
-
M 10,20 L 50,60：从画布 (10,20) 开始，画直线到绝对位置 (50,60) -
m 10,20 l 40,40：先移动到 (10,20)，再向右 40、向下 40，终点是 (50,60) —— 表面结果一样，但逻辑起点不同 - 混用如
M 10,20 l 40,40是合法的，但容易引发坐标误判；尤其在动态拼接d字符串时，若默认用小写偏移却忘了重置起始点，后续所有坐标都会偏移
d 中逗号和空格的边界规则
逗号只在坐标对之间可选，空格承担主要分隔作用。浏览器解析时会按空格切分 token，再对每个 token 按逗号拆 XY：
-
M10 20L50 60✅ 可解析为M+10+20+L+50+60 -
M10,20L50,60✅ 同上，但更易读 -
M10 20 L50,60✅ 混用也行，但不推荐——增加维护成本 -
M10,20L50 60❌ 部分旧版 Safari 会卡在L50，认为L50是非法指令（把数字粘连进指令名）
稳妥做法：指令后加空格，坐标对内用逗号，坐标对间用空格，例如 M 10,20 L 50,60。
常见错误：漏掉初始 M 或多写 Z
路径必须以 Moveto（M 或 m）开头，否则浏览器会忽略整条路径（无报错，只是不渲染）：
-
L 10,10→ 不显示任何内容，控制台也无提示 -
M 0,0 L 10,10 Z→ 正确闭合，形成三角形边框 -
M 0,0 L 10,10 Z Z→ 第二个Z被忽略，但容易掩盖逻辑错误（比如重复调用闭合函数） - 动态生成路径时，若条件分支未覆盖所有情况，可能意外输出空字符串或纯
L指令，导致静默失败
性能提示：避免在动画中高频重写 d
每次修改 d 属性都会触发 SVG 渲染管线重排，比改 transform 或 opacity 代价高得多：
- 圆点沿路径移动？用
getPointAtLength()计算位置 +transform: translate()移动元素，别重写整个d - 需要形变动画？优先用
<animate attributename="d"></animate>配合keySplines，而非 JS 循环拼字符串 - 大量路径需实时更新（如拓扑图连线）？考虑用
<path></path>+transform组合替代重绘d，或切换到 Canvas
真正难的不是记住指令语法，而是理解每个字符背后坐标系的“当前点”状态——它不显示、不报错，但决定一切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
