<line>绘制单条线段，需x1、y1、x2、y2四个属性；<polyline>绘制多段连续折线，通过points属性传入坐标对列表，不自动闭合。
SVG 中的 <line> 和 <polyline> 是绘制直线段的基础元素，结构简洁但用途明确：前者画单条线段，后者画多段首尾相连的线段（不自动闭合）。
Line：两点确定一条线段
<line> 是最简直线元素，必须通过四个属性定义起点和终点坐标：
- x1, y1：起点横纵坐标
- x2, y2：终点横纵坐标
例如：<line x1="10" y1="20" x2="100" y2="80" stroke="blue" stroke-width="2"/> 会从 (10,20) 画到 (100,80)，颜色为蓝色、线宽为 2。它不接受其他点，也不支持描点数组。
Polyline：用坐标列表绘制连续折线
<polyline> 通过 points 属性一次性声明多个点，浏览器按顺序两两连接成线段：
立即学习“前端免费学习笔记（深入）”；
-
points 值为一组空格或逗号分隔的坐标对，如
"0,0 50,20 100,0"或"0,0,50,20,100,0" - 共 n 个点，生成 n−1 段线段；不会自动首尾闭合（如需闭合，应使用
<polygon>）
示例：<polyline points="20,30 40,10 60,30 80,10" fill="none" stroke="red" stroke-width="1.5"/> 绘制三段折线，无填充，红色描边。
共性与注意事项
两者都依赖 stroke 显示线条（fill 对 <line> 无效，对 <polyline> 默认为黑色填充，通常设为 fill="none"）：
- 坐标单位默认为用户坐标系中的像素，支持小数（如
y1="2.5"） - 所有坐标值可为相对或绝对，但 SVG 中统一按绝对位置解析（无内置相对坐标语法）
- 若某坐标缺失或格式错误（如
points="10,20,30"奇数个数值），该点被忽略，后续合法点仍生效
简单对比速查
● 单一线段 → 用 <line>，语义清晰、性能轻量
● 多段连接线（如路径轮廓、图表连线、矢量图标骨架）→ 用 <polyline>，避免嵌套多个 <line>
● 要闭合图形 → 改用 <polygon>，它与 <polyline> 共享 points 语法，但自动闭合
