SVG 路径可视化编辑器

SVG 路径可视化编辑器

粘贴任何 SVG 路径的 d 属性并实时查看其渲染效果。此工具将每个命令分解为其参数和绝对终点，绘制贝塞尔控制点的辅助线，并在绝对坐标和相对坐标之间重写路径，支持可配置的精度。它专为希望在不离开浏览器的情况下理解、清理或手动调整原始 d 字符串的 SVG 开发者设计。

如何使用

1. 将您的路径 d 属性的内容（或点击“尝试示例”）粘贴到输入框中。
2. 调整 viewBox 以匹配路径创建时的画布。默认设置 0 0 200 200 适用于内置示例。
3. 设置笔画颜色、笔画宽度和填充颜色，以预览路径的渲染效果。
4. 选择坐标模式——保持不变、转换为绝对坐标或转换为相对坐标——以及从 0 到 6 位小数的精度。
5. 切换叠加层以显示或隐藏网格、编号命令端点、贝塞尔控制点和绘制动画。
6. 复制变换后的 d 属性，或下载完整的独立 SVG 文件。

特征

• 实时路径预览 – 将您的 d 字符串渲染到一个可配置笔画、填充和 viewBox 的 SVG 画布中。
• 命令分解表 – 按顺序列出每个命令及其参数、标签参数和绝对终点。
• 贝塞尔控制点叠加层 – 为 C、S、Q 和 T 命令绘制虚线辅助线和橙色控制点，以便您看到曲线的形状。
• 编号端点 – 用绿色标记路径起点，用蓝色标记每个后续命令的终点，并附上索引标签。
• 绝对 ↔ 相对坐标转换 – 在不改变渲染形状的情况下，将整个 d 字符串重写为绝对或相对坐标系统。
• 坐标四舍五入 – 从 0 到 6 位小数裁剪坐标精度，以缩短并规范化路径数据。
• 网格叠加层 – 与 viewBox 相关联的自动大小网格线和零轴高亮。
• 路径长度 – 使用浏览器的 getTotalLength API 报告路径在 viewBox 单位中的总长度。
• 绘制动画 – 可选的 stroke-dashoffset 动画，循环绘制路径以用于视觉调试。
• 独立 SVG 导出 – 复制或下载一个包含当前 viewBox 和样式设置的完整 SVG 文件。

支持的路径命令

• M / m – 移动到命令：在指定点开始一个新的子路径。
• L / l – 直线命令：从当前位置画一条直线到指定点。
• H / h – 水平线命令：从当前位置画一条水平线到指定的 x 值。
• V / v – 垂直线命令：从当前位置画一条垂直线到指定的 y 值。
• C / c – 三次贝塞尔曲线：两个控制点加一个终点。
• S / s – 平滑三次贝塞尔曲线：自动反射上一个三次贝塞尔控制点。
• Q / q – 二次贝塞尔曲线：一个控制点加一个终点。
• T / t – 平滑二次贝塞尔曲线：自动反射上一个二次贝塞尔控制点。
• A / a – 椭圆弧命令：半径、x 轴旋转、大弧标志和扫过标志，以及终点。
• Z / z – 关闭路径：从子路径起点画一条直线返回。