SVG路径编辑器

可视化编辑SVG path数据，支持实时预览和导出

路径编辑器

快捷工具

形状工具

路径参数

填充颜色

描边颜色

描边宽度2px

透明度1

线条端点

预览

生成的代码

<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="#3b82f6"
    stroke="#1e40af"
    stroke-width="2"
    stroke-linecap="round"
    opacity="1"
  />
</svg>

路径命令说明

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 - 关闭路径

大写字母表示绝对坐标，小写字母表示相对坐标