必须指定x1、y1、x2、y2四个属性，缺一即不渲染；靠points成对坐标绘折线，奇数个值被截断；自动闭合，fill与stroke需分别设置。
line 必须填满 x1 y1 x2 y2，缺一个就消失
浏览器对 <line></line> 的属性校验极松：漏掉 x1、y2 任一值，不会报错，也不会渲染——直接静默跳过。常见手误是只写起点或只写终点，比如 <line x1="10" y1="20" x2="100"></line>（缺 y2），结果页面空白。
坐标值不支持单位，x1="10px" 或 y1="5em" 全部被当无效值丢弃；负数和小数完全合法，y1="-2.5" 是有效坐标。
fill 对 <line></line> 完全无效，它只响应 stroke 和 stroke-width。哪怕写了 fill="blue"，线条颜色也不会变。
polyline 的 points 必须成对，奇数个值会被截断
<polyline></polyline> 只靠 points 属性绘图，其他属性都是可选的。这个字符串必须含偶数个数值，两两组成 (x, y) 坐标对。写成 points="10,20 30,40 50"（末尾多一个 50）时，浏览器会丢弃孤立的 50，只画出前两对点之间的线段。
分隔符灵活：空格、逗号、混合都行，但混用易出错，建议统一用空格分隔坐标对，逗号分隔 x/y，例如 points="10,20 30,40 50,60"。
默认有黑色填充，不加 fill="none" 会导致多边形区域遮挡背景或其他元素，尤其在重叠绘制时容易误判为“线条没画出来”。
polygon 自动闭合，但 fill 和 stroke 要分开设
<polygon></polygon> 和 <polyline></polyline> 共享 points 语法，但行为关键不同：浏览器强制连接最后一个点和第一个点，形成封闭图形。写三个点 points="0,0 100,0 50,100" 就是实心三角形，不用手动补回起点。
常见错误是把 <polygon></polygon> 当成加强版 <polyline></polyline> 用，结果发现“少一条边”——其实是用了 stroke="none" 或 fill="transparent"，而非路径未闭合。
fill 控制内部着色，stroke 控制边线，二者独立生效。想画空心多边形，得同时设 fill="none" 和 stroke="black"；只设 stroke 不设 fill，默认填充为黑色（不是透明）。
选哪个？看语义和性能，别硬套
单条线段 → 无条件用 <line></line>：DOM 轻、语义准、属性少、不易错。
多个点连成开放折线（如图表趋势线、图标骨架）→ 用 <polyline></polyline>：比一堆 <line></line> 节省 DOM 节点，解析更快。
需要首尾闭合 → 直接上 <polygon></polygon>：别试图用 <polyline></polyline> 手动重复首坐标，既冗余又易出错；<polygon></polygon> 的自动闭合是保障。
真正难的不是标签怎么写，而是坐标数据从哪来、是否漏点、y 轴方向要不要翻转（数学坐标系 vs SVG 屏幕坐标系）。这些逻辑不在 HTML 里，但决定你画得准不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
