SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

分手后的思念是犯贱 2021-09-20 10:48 682阅读 0赞

**目录**

[SVG 学习<一>基础图形及线段][SVG]

[SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组][SVG _ SVG_ stroke_ svg]

[SVG 学习<三>渐变][SVG 1]

[SVG 学习<四> 基础API][SVG _ _API]

[SVG 学习<五> SVG动画][SVG _ SVG]

[SVG 学习<六> SVG的transform][SVG _ SVG_transform]

[SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令][SVG _ SVG_path_1]

[SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令][SVG _ SVG_path_2]

[（转）利用 SVG 和 CSS3 实现有趣的边框动画][SVG _ CSS3]

**++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++**

查阅一些关于贝塞尔曲线资料后，对贝塞尔曲线有了大概的了解。

个人对贝塞尔曲线的理解：

**二次贝塞尔曲线：**由起点、终点和一个控制点控制的范围内绘制的一条曲线；

**三次贝塞尔曲线：**由起点、终点和两个个控制点控制的范围内绘制的一条曲线；

四次贝塞尔曲线/五次贝塞尔曲线 ... ... 以此类推。

**贝塞尔曲线命令**

理解了什么是贝塞尔曲线，贝塞尔曲线命令就很好理解了。

SVG中只能定义二次 三次贝塞尔曲线

二次贝塞尔曲线：Q x1 y1 x y； x1 y1 定义二次贝塞尔曲线控制点坐标， x y 定义二次贝塞尔曲线终点的位置；

三次贝塞尔曲线：C x1 y1 x2 y2 x y； x1 y1 定义三次贝塞尔曲线第一个控制点坐标，x2 y2 定义三次贝塞尔曲线第二个控制点位置  x y 定义三次贝塞尔曲线终点的位置；

例：

![744482-20170917112619188-1303817569.png][]

蓝色为二次贝塞尔曲线，红色为三次贝塞尔曲线。

**光滑贝塞尔曲线命令**

光滑贝塞尔曲线是贝塞尔曲线的光滑版（曲线更圆滑）；

光滑贝塞尔曲线命令：S 光滑版二次贝塞尔曲线  Q 普通二次贝塞尔曲线   T 光滑版三次贝塞尔曲线   C 普通版三次贝塞尔曲线。

例：

![744482-20170917121212672-3877822.png][]

![744482-20170917121229141-1477054480.png][]

以上是两种贝塞尔曲线的对比

还有关于更详细的贝塞尔曲线[视频教程][Link 1]  [光滑贝塞尔曲线视频教程][Link 2]

转载于:https://www.cnblogs.com/MirageFox/p/7535173.html

[SVG]: https://www.cnblogs.com/MirageFox/p/7241258.html
[SVG _ SVG_ stroke_ svg]: https://www.cnblogs.com/MirageFox/p/7255803.html
[SVG 1]: https://www.cnblogs.com/MirageFox/p/7259994.html
[SVG _ _API]: https://www.cnblogs.com/MirageFox/p/7458144.html
[SVG _ SVG]: https://www.cnblogs.com/MirageFox/p/7486042.html
[SVG _ SVG_transform]: https://www.cnblogs.com/MirageFox/p/7495051.html
[SVG _ SVG_path_1]: https://www.cnblogs.com/MirageFox/p/7526088.html
[SVG _ SVG_path_2]: https://www.cnblogs.com/MirageFox/p/7535173.html
[SVG _ CSS3]: https://www.cnblogs.com/MirageFox/p/7535203.html
[744482-20170917112619188-1303817569.png]: /images/20210726/cf0836ed85094528a5abeff90fd8a031.png
[744482-20170917121212672-3877822.png]: /images/20210726/f1b8f635e9264611b5bd0102d6922dd9.png
[744482-20170917121229141-1477054480.png]: /images/20210726/07890a37a14e4c0c8b436df30d5e4c43.png
[Link 1]: http://www.imooc.com/video/3767
[Link 2]: http://www.imooc.com/video/3768