SVG（Scalable Vector Graphics）是一种用于描述二维图形的XML标记语言。在SVG中，曲线是一种常见的图形元素，用于创建平滑的曲线形状。本章将介绍SVG中曲线的基本概念和用法。
曲线基本概念
在SVG中，有三种类型的曲线可以使用：直线（line）、二次贝塞尔曲线（quadratic Bézier curve）和三次贝塞尔曲线（cubic Bézier curve）。这些曲线类型可以通过路径（path）元素来定义。
直线
直线是最简单的曲线类型，由起点和终点两个坐标点确定。在SVG中，直线可以通过<line>元素来定义，示例代码如下：
---- ----------- ------------- ----- ------- ------- ------- ------- -------------- -- ------
上面的代码定义了一个起点坐标为(10, 10)，终点坐标为(90, 90)的直线，颜色为黑色。
二次贝塞尔曲线
二次贝塞尔曲线由起点、控制点和终点三个坐标点确定。在SVG中，二次贝塞尔曲线可以通过<path>元素的Q命令来定义，示例代码如下：
---- ----------- ------------- ----- ------ -- --- -- -- --- ----------- -------------- -- ------
上面的代码定义了一个起点坐标为(10, 10)，控制点坐标为(50, 90)，终点坐标为(90, 10)的二次贝塞尔曲线，颜色为黑色。
三次贝塞尔曲线
三次贝塞尔曲线由起点、两个控制点和终点四个坐标点确定。在SVG中，三次贝塞尔曲线可以通过<path>元素的C命令来定义，示例代码如下：
---- ----------- ------------- ----- ------ -- --- -- -- -- -- --- ----------- -------------- -- ------
上面的代码定义了一个起点坐标为(10, 10)，两个控制点坐标分别为(30, 90)和(70, 90)，终点坐标为(90, 10)的三次贝塞尔曲线，颜色为黑色。
总结
曲线是SVG中常用的图形元素之一，可以用于创建平滑的曲线形状。通过直线、二次贝塞尔曲线和三次贝塞尔曲线，我们可以实现各种复杂的曲线效果。在实际开发中，可以结合CSS和JavaScript来对SVG曲线进行样式和交互的处理。