祈灵工具箱✒️贝塞尔曲线编辑器 - 在线钢笔工具画 SVG 路径，多段曲线组合成图形
像设计软件里的钢笔工具一样画图：点击加尖角点，按住拖动拉出平滑曲线，点回起点闭合成图形。多条路径可以叠在一起、各自设置填充和描边，带洞的图形（如圆环）也能画。曲线可以是 3 阶、4 阶或 5 阶，阶数越高每段控制点越多、能拐的弯越多；没灵感时设好由几条曲线组成，点「随机图形」，旧图会平滑变形成一个新的团块、花朵或星芒。选中任意一段曲线，可以看到它的全部控制点、B(t) 公式，并在画布上一步步演示 de Casteljau 作图。画好后一键复制 SVG 路径或导出图片。
免费 · 无需注册 · 浏览器本地处理最后更新：
正在加载工具...
如何使用贝塞尔曲线编辑器
- 1选「钢笔」，在画布上点击添加锚点；按住鼠标拖动会拉出控制柄，得到平滑曲线
- 2点回第一个锚点闭合路径，或按 Enter / Esc 结束一条开放路径
- 3切回「选择」，拖锚点和控制柄调整形状；双击线段插入锚点，双击锚点切换尖角/平滑
- 4在右侧复制 SVG 路径 d、SVG 代码，或下载 SVG / PNG
常见问题
- 什么是贝塞尔曲线？
- 由几个控制点决定形状的光滑曲线。三次贝塞尔曲线有 4 个控制点：P₀ 和 P₃ 是起点和终点，P₁、P₂ 决定曲线怎么弯，公式是 B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃。设计软件里的钢笔工具、字体轮廓、SVG 的 path 都用它。
- 4 阶、5 阶贝塞尔曲线和三次有什么区别？
- n 阶贝塞尔曲线有 n+1 个控制点：三次 4 个，4 阶 5 个，5 阶 6 个，公式是 B(t) = Σ C(n,i)(1−t)ⁿ⁻ⁱtⁱPᵢ。阶数越高，一段曲线能拐的弯越多。把 3 阶升到 4、5 阶是精确的，形状完全不变；反过来降阶只能近似，工具会显示最大偏差。SVG 只认到三次，所以高阶曲线导出时会自动拆成多段三次曲线，误差小于 0.1 像素。
- 怎么把多段曲线组成一个封闭图形？
- 用钢笔工具依次点出锚点（需要弧线的地方按住拖动），最后点回第一个锚点就闭合了。每两个相邻锚点之间就是一段三次贝塞尔曲线，整条路径就是多段曲线首尾相接。
- 尖角点和平滑点有什么区别？
- 平滑点两侧的控制柄在一条直线上，曲线经过时没有折角；尖角点两侧控制柄方向独立（或者没有控制柄），会形成拐角。双击锚点可以在两者之间切换，拖控制柄时按住 Alt 也能把平滑点拆开。
- de Casteljau 作图是什么？
- 一种用反复取比例点求曲线上点的方法：在四个控制点连成的三条线上各取 t 比例的点，再在得到的两条线上取 t 比例点，最后一条线上的 t 比例点就是 B(t)。勾选「演示」后拖动 t 滑块就能看到这个过程。插入锚点时也是用它把曲线精确切成两段。
- 导出的路径能直接用在网页里吗？
- 可以。「复制 d」得到的就是 <path d="…"> 里的内容；「复制 SVG 代码」得到带填充和描边的完整 SVG，可以直接粘进 HTML，也可以下载 SVG 文件给 Figma、Illustrator 打开。
- 能编辑别人画好的 SVG 吗？
- 能。把 SVG 里 path 的 d 属性粘进「导入」框即可，支持绝对和相对坐标的 M L H V C S Q T A Z 命令。椭圆弧（A 命令，含旋转和大弧/顺逆标志）会按 SVG 规范切成不超过 90° 的小段转成三次贝塞尔曲线，误差约为半径的万分之三，导入后就能像普通曲线一样拖动编辑。