SVG 折线

SVG 元素

SVG 元素

<polyline> 元素用于创建由一个或多个直线段组成的图形。它定义了一个开放形状，意味着最后一个点不会自动连接回第一个点（与 <polygon> 元素不同）。

示例 1：创建一个简单的折线

此示例绘制了一条由多个连接线段组成的折线。points 属性定义了折线每个顶点的 (x,y) 坐标。

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Polyline Example 1</title>
</head>
<body>
  <svg width="500" height="200">
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
              style="fill:none; stroke:black; stroke-width:3;" />
  </svg>
</body>
</html>

代码解释（示例 1）：

• points: 一系列 (x,y) 坐标对。每对坐标定义了折线的一个顶点。坐标可以用逗号、空格或两者组合分隔。例如，“20,20 40,25 …” 定义了点 (20,20)、(40,25) 等。
• style=“fill:none; stroke:black; stroke-width:3;”: 设置折线的样式。fill:none 使内部透明（折线常见）。stroke:black 将线条颜色设置为黑色，stroke-width:3 将其粗细设置为 3 个单位。

示例 2：创建一个阶梯状折线

此示例展示了另一条折线，形成了一个类似阶梯的形状。它使用了白色填充和红色轮廓。

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Polyline Example 2</title>
</head>
<body>
  <svg width="500" height="180">
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
              style="fill:white; stroke:red; stroke-width:4;" />
  </svg>
</body>
</html>

与 <polygon> 的主要区别： <polyline> 是一个开放形状。如果您希望形状自动闭合（从最后一个点绘制一条线回到第一个点），请改用 <polygon> 元素。

**应用：**折线适用于绘制开放路径，例如图表、示意图或不需要闭合形状的自由形式线条艺术。