HTML SVG 如何使用 polygon 和 polyline 绘制多边形

<polygon>自动闭合，浏览器强制连接末点与起点形成封闭图形；<polyline>仅按序连点成线、不闭合；二者points语法相同但语义不同，选对标签比写法更重要。

直接用 <polygon> 画闭合图形，用 <polyline> 画开放折线——关键不是怎么写标签，而是选对标签、填对坐标、设对样式。

polygon：自动闭合，适合实心或描边图形

<polygon> 只靠 points 属性就能成形，浏览器会自动把最后一个点连回第一个点，形成封闭区域。

1. 写法示例：<polygon points="10,10 50,10 30,40" fill="blue" stroke="black" stroke-width="2"></polygon> → 画出一个实心蓝底黑边三角形
2. 坐标必须成对，空格或逗号分隔都行，但建议统一用空格+逗号组合，比如 "100,20 140,50 140,90"
3. fill 和 stroke 要分开设置：只设 stroke 不设 fill，默认填充为黑色；想透明就得显式写 fill="none"
4. 常见误区：以为“少一条边”是没闭合——其实是 stroke="none" 或 fill="transparent" 导致看不见，不是路径问题

polyline：不闭合，适合趋势线、骨架线、路径草稿

<polyline> 严格按点顺序连线，首尾不相连，适合不需要封闭的线条场景。

1. 写法示例：<polyline points="10,20 40,30 60,10 80,40" stroke="red" fill="none"></polyline> → 画四段连通的折线，无填充
2. points 值必须偶数个：写成 "10,20 30,40 50"（末尾多一个 50），浏览器会丢掉 50，只画前两对点
3. 默认有黑色填充，不加 fill="none" 会导致遮挡背景，尤其在叠加绘制时容易误判为“没画出来”
4. 比多个 <line> 更轻量，DOM 节点少、解析快，适合动态生成的图表线或图标结构线

怎么选？看语义，别硬套

不是“哪个更高级”，而是“哪个更准确”：

1. 单条线段 → 用 <line>：属性最少、语义最准、不易出错
2. 多个点连成开放路径（如折线图、箭头骨架）→ 用 <polyline>
3. 需要首尾闭合（三角形、星标、徽章、心形）→ 直接用 <polygon>，别试图用 <polyline> 多写一遍起点

坐标的坑比语法还多

真正卡住人的往往不是标签怎么写，而是数据本身：

1. 所有坐标都是相对于 <svg> 左上角 (0,0)，不是页面位置；偏移或裁剪先查 viewBox 是否合理
2. y 轴向下为正，和数学坐标系相反，做图表时注意是否要翻转 y 值
3. 坐标值不支持单位，x1="10px" 会被当无效丢弃；负数和小数合法，比如 y="−2.5"
4. 复杂图形（五角星、六边形）不用手算，直接复制成熟坐标串更稳——资料里已整理好常用形状的 points