SVG路径编辑器
在线SVG路径编辑器，支持Path命令可视化编辑、形状模板套用、样式调节与代码导出下载。
路径编辑器
快捷工具
形状工具
路径参数
预览
缩放: 100%
生成的代码
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path
d="M 50 50 L 150 50 L 200 150 L 100 200 L 50 150 Z"
fill="#f59e0b"
stroke="#b45309"
stroke-width="2"
stroke-linecap="round"
opacity="1"
/>
</svg>工具说明
SVG 路径编辑器用于快速编写和调试 path 命令，支持在同一界面完成路径绘制、样式调节、代码复制与文件导出。
路径命令说明
M x y | 移动到 |
L x y | 直线到 |
H x | 水平线到 |
V y | 垂直线到 |
C x1 y1 x2 y2 x y | 三次贝塞尔曲线 |
S x2 y2 x y | 平滑三次贝塞尔曲线 |
Q x1 y1 x y | 二次贝塞尔曲线 |
T x y | 平滑二次贝塞尔曲线 |
A rx ry x-axis-rotation large-arc-flag sweep-flag x y | 椭圆弧 |
Z | 关闭路径 |
大写字母表示绝对坐标，小写字母表示相对坐标。
工具定位
当你需要制作图标轮廓、验证动画轨迹或排查矢量资源路径异常时，可以通过该工具进行可视化编辑并即时确认结果。
核心功能
- 支持直接编辑 Path 命令并实时渲染 SVG 图形。
- 支持圆形、心形、星形等快捷模板与常见多边形模板。
- 支持填充、描边、透明度、线条端点等样式参数调节。
- 支持代码一键复制和 SVG 文件下载，便于项目复用。
使用步骤
- 在路径编辑器中输入 Path 命令，或先使用快捷模板生成基础形状。
- 根据需求调整填充颜色、描边颜色、描边宽度和透明度参数。
- 在预览面板中缩放查看细节，确认路径结构与视觉效果。
- 复制生成代码或下载 SVG 文件，直接用于前端页面与设计资源。
应用场景
- 前端图标与装饰图形的路径快速制作
- SVG 动画 motion path 轨迹调试与校验
- 设计稿转代码时的路径参数核对
- 教学演示中对 Path 命令语法的可视化讲解
编辑建议
- 建议先用简单命令搭建轮廓，再逐步补充曲线细节。
- 曲线路径调试时可先降低描边宽度，便于观察节点走势。
- 复杂路径可先格式化，提升命令可读性与排错效率。
- 导出前请确认坐标系和 viewBox 与目标场景一致。
隐私说明
本工具不上传路径数据，所有渲染与导出操作均在浏览器本地完成。