详解SVG路径path的贝塞尔曲线

什么是贝塞尔曲线？

“什么是贝塞尔曲线？”又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线。

我们只要知道，他可以绘制任何曲线，包括之前我们最常用到的直线。

贝塞尔曲线有：线性贝塞尔曲线（直线）、二次方贝塞尔曲线、三次方贝塞尔曲线......

维基百科上对于贝塞尔曲线描述很赞的Gif动画如下：

2 回顾SVG中path的主要指令

以上讲SVG形状的时候已经讲解过SVG中的线性贝塞尔曲线。其中重要的属性d用来定义路径的坐标点。具体的值由指令字母+坐标点来确定。例如以下代码M=moveTo(移动到),L=lineTo(画线到)

前五个指令为基本指令。除了以下五个之外的指令，剩下的都是跟贝塞尔曲线相关的了。

3.线性贝塞尔曲线

属性d用于存储路径坐标点数据，下面构造的是一条

4二次贝塞尔曲线

二次贝塞尔曲线对应的指令和参数是：

Q x1 y1 x y

T指令自动补全对称的控制点（上图蓝色部分），让曲线平滑起来

5.三次贝塞尔曲线

三次贝塞尔曲线的命令参数为：C x1 y1 x2 y2 x y

加群295383988，小白一起讨论技术傲~