SVG Path 解析器

粘贴 SVG <path> 的 d 属性,按 SVG 规范解析各绘图命令(M/L/H/V/C/S/Q/T/A/Z),拆分出命令段、参数与含义,并统计段数、坐标点数与是否闭合。可把路径渲染到内联 <svg> 中预览,全部在浏览器本地完成。

输入 path 数据 等待输入

直接粘贴 d 属性的值(不含 d= 与引号),如 M10 10 L90 10 L50 90 Z。

命令段解析
命令段—
坐标点—
命令种类—
是否闭合—
粘贴 path 的 d 属性并点击「解析路径」,命令段将显示在这里。

命令区分大小写:大写为绝对坐标,小写为相对坐标。

路径预览
解析成功后,路径会渲染到此处预览。

预览使用内联 SVG 直接渲染原始 d 数据;viewBox 按坐标范围自动适配,曲线按控制点近似。

解析规则
  • 命令参数个数与 SVG 规范一致:M/L=2、H/V=1、C=6、S=4、Q=4、T=2、A=7、Z=0。
  • 大写命令使用绝对坐标,小写命令使用相对坐标(相对当前点)。
  • 数字支持负号、小数点与科学计数法;逗号、空格均可作分隔符。
  • 若某个命令后跟多组参数,则按规范重复该命令(moveto 之后的额外坐标对按 lineto 处理)。
  • 点数按坐标点计:C 记 3 点、S/Q 记 2 点、A 记 1 点(终点)、Z 记 0 点,其余各记 1 点。
  • 「是否闭合」指路径中出现过 Z/z 闭合命令。
  • 预览为内联 SVG 直接渲染原始 d 数据,viewBox 依据坐标范围近似适配。