绘制单条线段，需x1、y1、x2、y2四个属性；绘制多段连续折线，通过points属性传入坐标对列表，不自动闭合。

SVG 中的 <line></line> 和 <polyline></polyline> 是绘制直线段的基础元素，结构简洁但用途明确：前者画单条线段，后者画多段首尾相连的线段（不自动闭合）。

Line：两点确定一条线段

<line></line> 是最简直线元素，必须通过四个属性定义起点和终点坐标：

• x1, y1：起点横纵坐标
• x2, y2：终点横纵坐标

例如：<line x1="10" y1="20" x2="100" y2="80" stroke="blue" stroke-width="2"></line> 会从 (10,20) 画到 (100,80)，颜色为蓝色、线宽为 2。它不接受其他点，也不支持描点数组。

Polyline：用坐标列表绘制连续折线

<polyline></polyline> 通过 points 属性一次性声明多个点，浏览器按顺序两两连接成线段：

立即学习“前端免费学习笔记（深入）”；

• points 值为一组空格或逗号分隔的坐标对，如 "0,0 50,20 100,0" 或 "0,0,50,20,100,0"
• 共 n 个点，生成 n−1 段线段；不会自动首尾闭合（如需闭合，应使用 <polygon></polygon>）

示例：<polyline points="20,30 40,10 60,30 80,10" fill="none" stroke="red" stroke-width="1.5"></polyline> 绘制三段折线，无填充，红色描边。

共性与注意事项

两者都依赖 stroke 显示线条（fill 对 <line></line> 无效，对 <polyline></polyline> 默认为黑色填充，通常设为 fill="none"）：

• 坐标单位默认为用户坐标系中的像素，支持小数（如 y1="2.5"）
• 所有坐标值可为相对或绝对，但 SVG 中统一按绝对位置解析（无内置相对坐标语法）
• 若某坐标缺失或格式错误（如 points="10,20,30" 奇数个数值），该点被忽略，后续合法点仍生效

简单对比速查

● 单一线段 → 用 <line></line>，语义清晰、性能轻量
● 多段连接线（如路径轮廓、图表连线、矢量图标骨架）→ 用 <polyline></polyline>，避免嵌套多个 <line></line>
● 要闭合图形 → 改用 <polygon></polygon>，它与 <polyline></polyline> 共享 points 语法，但自动闭合