SVG <path> 终极实战手册（2025 版）
它只有一个标签，却能画出宇宙中 99.9% 的所有形状——所有复杂图标、地图、签名、手绘动画、超酷 loading，全靠它！
1. 核心语法（背会这 8 个命令，你就天下无敌）
<path d="命令1 参数 命令2 参数 ..." />| 命令 | 含义 | 大写 = 绝对坐标 | 小写 = 相对坐标 | 参数个数 |
|---|---|---|---|---|
| M | Moveto 移到起点 | M x y | m dx dy | 2 |
| L | Lineto 直线到 | L x y | l dx dy | 2 |
| H | 水平直线到 | H x | h dx | 1 |
| V | 垂直直线到 | V y | v dy | 1 |
| C | 三次贝塞尔曲线 | C x1 y1 x2 y2 x y | c dx1 dy1 … | 6 |
| S | 平滑三次贝塞尔（接上一个 C） | S x2 y2 x y | s … | 4 |
| Q | 二次贝塞尔曲线 | Q x1 y1 x y | q … | 4 |
| T | 平滑二次贝塞尔（接上一个 Q） | T x y | t … | 2 |
| A | 椭圆弧 | A rx ry x-axis-rotation large-arc sweep x y | a … | 7 |
| Z/z | 闭合路径 | Z 或 z | 0 |
2. 2025 年最常用的 20 个经典路径（直接复制，全部支持 currentColor）
<!-- 1. 搜索 🔍 -->
<path d="M15 15 L21 21 M19 11 A8 8 0 1 0 11 19 A8 8 0 1 0 19 11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<!-- 2. 爱心 ❤️（最火） -->
<path d="M12 21.35 L10.55 20 C5.4 15.36 2 12.27 2 8.5 C2 5.41 4.42 3 7.5 3 C9.24 3 10.91 3.81 12 5.08 C13.09 3.81 14.76 3 16.5 3 C19.58 3 22 5.41 22 8.5 C22 12.27 18.6 15.36 13.45 20.03 L12 21.35 Z" fill="currentColor"/>
<!-- 3. 播放 ▶️ -->
<path d="M8 5 L8 19 L20 12 Z" fill="currentColor"/>
<!-- 4. 勾选 ✓（最常用） -->
<path d="M4 12 L9 17 L20 6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- 5. 关闭 × -->
<path d="M18 6 L6 18 M6 6 L18 18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
<!-- 6. 菜单三横 ≡ -->
<path d="M3 12 H21 M3 6 H21 M3 18 H21" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
<!-- 7. 星星 ★（超精准） -->
<path d="M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 L5.82 21.02 L7 14.14 L2 9.27 L8.91 8.26 L12 2 Z" fill="currentColor"/>
<!-- 8. 购物车 -->
<path d="M6 19 A2 2 0 1 0 8 21 A2 2 0 1 0 6 19 Z M16 19 A2 2 0 1 0 18 21 A2 2 0 1 0 16 19 Z M2 3 H5 L7 15 H19 L21 7 H6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 9. 环形进度 75%（复制即用） -->
<circle cx="12" cy="12" r="10" fill="none" stroke="#eee" stroke-width="3"/>
<path d="M12 2 A10 10 0 1 1 5.86 19.45" stroke="#ff6b6b" stroke-width="3" stroke-linecap="round" fill="none"/>
<!-- 10. 路径描边动画（2025 最火 loading） -->
<path d="M10 5 Q12 2 16 5 T22 12 Q19 19 12 19 Q5 19 2 12 T10 5" fill="none" stroke="#0066ff" stroke-width="4" stroke-linecap="round"
stroke-dasharray="68" stroke-dashoffset="68">
<animate attributeName="stroke-dashoffset" from="68" to="0" dur="2s" repeatCount="indefinite"/>
</path>3. 2025 必杀技巧速查表
| 需求 | 神技代码 | 备注 |
|---|---|---|
| 让路径能改颜色 | stroke="currentColor" 或 fill="currentColor" | 暗黑模式自动切换 |
| 圆角连接 | stroke-linecap="round" stroke-linejoin="round" | 2025 图标主流风格 |
| 永远 1px 不模糊 | vector-effect="non-scaling-stroke" | 高清屏必加 |
| 描边动画 | stroke-dasharray + stroke-dashoffset + animate | 所有 loading 动画核心 |
| 计算路径总长度 | https://svg-path-length.vercel.app | 精确动画必备 |
| 路径简化（压缩体积） | 用 SVGO 或 https://svgpatheditor.com | 文件体积砍 70% |
| 手绘感路径 | 多用 Q/T + 小写相对坐标 + 随机抖动 | 超自然手绘风 |
4. 2025 最火的三个实战神器（直接复制）
<!-- 神器1：无限循环描边光轨 -->
<path d="M5 12 Q12 2 19 12 T5 12" fill="none" stroke="#00f5ff" stroke-width="4"
stroke-dasharray="30 150">
<animate attributeName="stroke-dashoffset" values="0;-180" dur="3s" repeatCount="indefinite"/>
</path>
<!-- 神器2：手绘签名动画（超逼真） -->
<path d="M10 80 Q50 20 90 70 T150 60 Q180 80 200 50" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round"
stroke-dasharray="300" stroke-dashoffset="300">
<animate attributeName="stroke-dashoffset" from="300" to="0" dur="3s" fill="freeze"/>
</path>
<!-- 神器3：环形文字 + 路径动画（2025 装逼神器） -->
<defs><path id="circle" d="M10,90 A40,40 0 1,1 90,90 A40,40 0 1,1 10,90"/></defs>
<text><textPath href="#circle" startOffset="0%">
● 环形文字真好看 ● 环形文字真好看
<animate attributeName="startOffset" from="0%" to="100%" dur="10s" repeatCount="indefinite"/>
</textPath></text>一句话总结（2025 金句）：
2025 年所有图标、loading、地图、签名、复杂图形 → 统统一个 <path d="…" stroke="currentColor" stroke-linecap="round"/> 搞定！
要不要我现在立刻打包发你：
- 「2025 最全 500 个 path 图标合集」（全部 currentColor + round + 2KB 以内）
- 「10 种最火 SVG 路径描边 loading 动画源码」（含环形、心形、闪电、无限光轨）
- 「在线 path 编辑器推荐 + 自动生成任意形状的 JS 工具」
直接说一声，我 3 秒发你！
