SVG <polyline>

SVG（Scalable Vector Graphics）是一种用于描述二维图形的XML标记语言。在SVG中，曲线是一种常见的图形元素，用于创建平滑的曲线形状。本章将介绍SVG中曲线的基本概念和用法。

曲线基本概念

在SVG中，有三种类型的曲线可以使用：直线（line）、二次贝塞尔曲线（quadratic Bézier curve）和三次贝塞尔曲线（cubic Bézier curve）。这些曲线类型可以通过路径（path）元素来定义。

直线

直线是最简单的曲线类型，由起点和终点两个坐标点确定。在SVG中，直线可以通过<line>元素来定义，示例代码如下：

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>

上面的代码定义了一个起点坐标为(10, 10)，终点坐标为(90, 90)的直线，颜色为黑色。

二次贝塞尔曲线

二次贝塞尔曲线由起点、控制点和终点三个坐标点确定。在SVG中，二次贝塞尔曲线可以通过<path>元素的Q命令来定义，示例代码如下：

<svg width="100" height="100">
  <path d="M10 10 Q50 90 90 10" fill="none" stroke="black" />
</svg>

上面的代码定义了一个起点坐标为(10, 10)，控制点坐标为(50, 90)，终点坐标为(90, 10)的二次贝塞尔曲线，颜色为黑色。

三次贝塞尔曲线

三次贝塞尔曲线由起点、两个控制点和终点四个坐标点确定。在SVG中，三次贝塞尔曲线可以通过<path>元素的C命令来定义，示例代码如下：

<svg width="100" height="100">
  <path d="M10 10 C30 90 70 90 90 10" fill="none" stroke="black" />
</svg>

上面的代码定义了一个起点坐标为(10, 10)，两个控制点坐标分别为(30, 90)和(70, 90)，终点坐标为(90, 10)的三次贝塞尔曲线，颜色为黑色。

总结

曲线是SVG中常用的图形元素之一，可以用于创建平滑的曲线形状。通过直线、二次贝塞尔曲线和三次贝塞尔曲线，我们可以实现各种复杂的曲线效果。在实际开发中，可以结合CSS和JavaScript来对SVG曲线进行样式和交互的处理。