SVG <path> 的 d 属性是命令与坐标的指令流，需理解大小写区分绝对/相对坐标、贝塞尔曲线三组坐标等规则；闭合用 Z，动画宜用 stroke-dasharray 或 transform；导出后应扁平化处理冗余变换。
SVG <path> 的 d 属性到底怎么写
不是靠背语法，而是靠理解「命令 + 坐标」的协作逻辑。d 本质是一串指令流，浏览器逐条执行：移动到哪、画直线、画贝塞尔曲线、闭合路径……写错一个字母（比如把 L 写成 l）就可能完全偏移。
常见错误现象：path 不显示、显示为一个点、图形缩在左上角、线条断裂。多数是坐标没跟对命令，或大小写混用（绝对坐标大写，相对坐标小写）。
-
M和m后必须跟一对坐标，缺一不可；漏掉会直接中断解析 -
Z或z表示闭合，但它不接受坐标，多写坐标会被忽略但可能影响后续命令 - 贝塞尔曲线的
C/c要接三组坐标（控制点1、控制点2、终点），少一组就降级为直线 - 用工具生成的
d常含大量小数，可手动四舍五入到 1–2 位（23.45678→23.46），不影响视觉，却大幅提升可读性
用 path 画圆/椭圆为什么不用 <circle>
因为 <circle> 无法做路径动画、无法参与 <clipPath> 定义、也不能用 stroke-dasharray 实现虚线描边动画——这些都依赖 <path> 的通用性。
真正用 path 拟合圆形，靠的是 4 段三次贝塞尔曲线（每段覆盖 90° 圆弧）。标准写法中，控制点系数是 0.551915（≈ 4×(√2−1)/3），但实际项目里用 0.552 完全够用，人眼几乎看不出差异。
立即学习“前端免费学习笔记（深入）”；
示例（半径 50 的圆，中心在 (100,100)）：
<path d="M 100,50 C 127.6,50 150,72.4 150,100 C 150,127.6 127.6,150 100,150 C 72.4,150 50,127.6 50,100 C 50,72.4 72.4,50 100,50 Z" />
- 所有坐标都是绝对值（大写命令），确保位置可控
- 最后一段
C回到起点，Z是保险闭合，双重保障 - 若需响应式缩放，别把数字写死，改用
viewBox+ CSSwidth控制尺寸
path 动画卡顿？先检查 transform 和 stroke-dasharray 的组合方式
直接对 d 属性做 CSS 动画（如 transition: d 0.3s）根本无效——CSS 不支持 d 的过渡解析。真要动形变，得用 SMIL（已废弃）或 JavaScript 驱动 setAttr，但性能差。
更稳的方案是：用 stroke-dasharray + stroke-dashoffset 做「描边绘制」动画，或用 transform 平移/旋转整个 path。两者不冲突，可以共存。
- 计算路径总长必须用
getTotalLength()，不能靠字符串解析或估算 -
stroke-dasharray设为"1000 1000"这类固定值，在响应式 SVG 中会失效；应 JS 动态读取并重设 - 给
path加transform="translate(10,20)"比在d里手动加偏移更安全，避免坐标错乱 - 动画中频繁调用
getTotalLength()有开销，建议缓存结果，仅在resize时更新
导出 SVG 时路径被转成 <g> 套嵌或出现 matrix() 变换
设计工具（Figma/Sketch/AI）导出的 SVG 经常带冗余 <g>、自动添加的 transform、甚至 matrix()，导致 <path> 的 d 看起来“没错”，但实际渲染位置偏移。
这不是 bug，是工具为了保留编辑状态做的妥协。真正上线前必须扁平化处理。
- 用 SVGOMG 开启 “Convert transforms to attributes” 和 “Remove hidden elements”
- 警惕
transform="matrix(1 0 0 1 10 20)"—— 它等价于transform="translate(10,20)"，但无法被 CSStransform覆盖，优先转成translate - 如果路径含
fill-rule="evenodd"但渲染异常，试试改成fill-rule="nonzero"，某些旧版 Safari 对前者支持不稳 - 导出后打开浏览器开发者工具，右键
<path>→ “Edit as HTML”，微调d看实时反馈，比猜快得多
路径数据看着抽象，其实每一步都在回答「接下来往哪去、怎么去」。复杂图形不是堆命令，而是分段验证：先保证 M→L 正确，再加 C，最后 Z。中间任何一步偏了，后面全得重算。
