✏️ SVG路径编辑器

编辑SVG path数据，实时可视化预览。支持所有SVG路径指令（M/L/H/V/C/S/Q/T/A/Z）。纯前端处理。

SVG Path 数据 (d属性)

描边颜色

填充颜色

描边宽度

视图尺寸

实时预览

解析结果

点击"解析指令"查看路径分析

如何使用在线SVG路径编辑器

使用在线SVG路径编辑器非常简单，只需三个步骤：

SVG Path是SVG中最强大的绘图元素之一，使用 d 属性定义一系列绘图指令（命令+坐标），可以绘制任意形状。主要命令包括：M（移动到）、L（画线）、C（三次贝塞尔曲线）、Q（二次贝塞尔曲线）、A（弧线）和Z（闭合路径）。

M=移动到(move to), L=画线(line to), H=水平线, V=竖直线, C=三次贝塞尔曲线, S=平滑三次贝塞尔, Q=二次贝塞尔, T=平滑二次贝塞尔, A=弧线, Z=闭合路径。大写表示绝对坐标，小写表示相对坐标。

可以从简单的形状开始（如矩形用M+L），然后尝试弧线和贝塞尔曲线。本工具的「加载示例」按钮提供了多种示例，结合「解析指令」可以理解每个命令的作用。

完全安全。所有SVG路径渲染和解析都在浏览器本地完成，无需上传任何数据到服务器。