# 贝塞尔曲线编辑器 - 在线钢笔工具画 SVG 路径，多段曲线组合成图形

> 免费在线贝塞尔曲线工具：钢笔点锚点、拖控制柄，把多段 3/4/5 阶贝塞尔拼成任意图形，可随机生成并播放变形动画，导出 SVG 路径与 PNG。

- 网址: https://qilingtools.com/zh/math/bezier
- 分类: 数学工具 (https://qilingtools.com/zh/math)
- 标签: [数学](https://qilingtools.com/zh/tags/math), [设计配色](https://qilingtools.com/zh/tags/design), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

像设计软件里的钢笔工具一样画图：点击加尖角点，按住拖动拉出平滑曲线，点回起点闭合成图形。多条路径可以叠在一起、各自设置填充和描边，带洞的图形（如圆环）也能画。曲线可以是 3 阶、4 阶或 5 阶，阶数越高每段控制点越多、能拐的弯越多；没灵感时设好由几条曲线组成，点「随机图形」，旧图会平滑变形成一个新的团块、花朵或星芒。选中任意一段曲线，可以看到它的全部控制点、B(t) 公式，并在画布上一步步演示 de Casteljau 作图。画好后一键复制 SVG 路径或导出图片。

## 使用步骤

1. 选「钢笔」，在画布上点击添加锚点；按住鼠标拖动会拉出控制柄，得到平滑曲线
2. 点回第一个锚点闭合路径，或按 Enter / Esc 结束一条开放路径
3. 切回「选择」，拖锚点和控制柄调整形状；双击线段插入锚点，双击锚点切换尖角/平滑
4. 在右侧复制 SVG 路径 d、SVG 代码，或下载 SVG / PNG

## 功能特点

- 钢笔工具：点击加尖角点、拖动加平滑点，点回起点自动闭合
- 支持 3、4、5 阶贝塞尔曲线：升阶精确、形状不变，降阶会显示最大偏差；高阶段导出时自动转成三次曲线
- 随机图形：可设定由几条曲线组成（2～24 段），每次只换控制点的值，并播放从旧图到新图的平滑变形动画；有团块、花朵、星芒、波纹圈几种风格，可选左右对称，按 R 连续换或开自动播放；点示例图形也会平滑变过去
- 平滑点拖一侧控制柄另一侧自动保持共线，按住 Alt 可拆成尖角
- 双击线段在该处精确插入锚点（de Casteljau 分割，形状完全不变）
- 多条路径叠加，每条单独设置填充、描边颜色与线宽，支持带洞图形
- 导入任意 SVG path d（M L H V C S Q T A Z，含相对坐标）：二次曲线精确转成三次，椭圆弧按 SVG 规范转成贝塞尔曲线
- 选中一段曲线即显示全部控制点、B(t) 展开式、切线与弧长，可拖动 t 演示 de Casteljau 作图
- 撤销/重做、网格吸附、方向键微调、滚轮缩放、自动保存到本机
- 导出 SVG 路径代码、完整 SVG 文件与 2 倍分辨率 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° 的小段转成三次贝塞尔曲线，误差约为半径的万分之三，导入后就能像普通曲线一样拖动编辑。

## 相关工具

- [函数图像](https://qilingtools.com/zh/math/graph): 免费在线函数绘图工具：输入 sin(x)、x^2、1/x 等公式即可画出函数图像，支持多条曲线叠加、参数方程、极坐标、数据点散点图与最小二乘拟合，可拖动缩放并导出 PNG/SVG。
- [科学计算器](https://qilingtools.com/zh/math/calculator): 免费在线科学计算器：直接输入 2*(3+4)^2、sin(pi/6)、log(8,2) 这样的算式即可得到结果，支持角度/弧度切换、阶乘、组合数与历史记录，浏览器本地计算。
- [方程求解](https://qilingtools.com/zh/math/equation): 免费在线解方程：输入系数即可求一元一次方程、一元二次方程（含判别式、顶点、因式分解、复数根）、一元三次方程与二元一次方程组的解，并给出计算过程。
- [分数计算器](https://qilingtools.com/zh/math/fraction): 免费在线分数计算器：分数加减乘除并自动约分，化简最简分数，分数转小数（识别循环节）、小数转分数（支持 0.1(6) 这类循环小数），带分数一并给出。
- [百分比计算](https://qilingtools.com/zh/math/percentage): 免费在线百分比计算器：求某数的百分之几、一个数是另一个数的百分之几、增长率与下降率、增加/减少百分比后的值，以及已知百分比反推原值，并给出计算公式。
- [质因数分解](https://qilingtools.com/zh/math/prime): 免费在线质因数分解工具：把整数分解成质因数连乘并写成幂的形式，列出全部因数与因数之和，判断一个数是不是质数并给出相邻质数，还能列出任意区间内的质数表。
- [最大公约数](https://qilingtools.com/zh/math/gcd-lcm): 免费在线求最大公约数（GCD）与最小公倍数（LCM）：支持两个或多个整数，给出是否互质、乘积、各数的质因数分解，两个数时还会列出辗转相除法的每一步。
- [统计计算](https://qilingtools.com/zh/math/statistics): 免费在线统计计算器：粘贴一组数据即可得到平均数、中位数、众数、极差、四分位数、样本与总体的方差和标准差、标准误、变异系数与异常值，适合作业与实验数据处理。