<polygon>自动闭合，浏览器强制连接末点与起点形成封闭图形；<polyline>仅按序连点成线、不闭合；二者points语法相同但语义不同，选对标签比写法更重要。
直接用 <polygon> 画闭合图形，用 <polyline> 画开放折线——关键不是怎么写标签，而是选对标签、填对坐标、设对样式。
polygon：自动闭合，适合实心或描边图形
<polygon> 只靠 points 属性就能成形，浏览器会自动把最后一个点连回第一个点，形成封闭区域。
- 写法示例：
<polygon points="10,10 50,10 30,40" fill="blue" stroke="black" stroke-width="2"></polygon>→ 画出一个实心蓝底黑边三角形 - 坐标必须成对，空格或逗号分隔都行，但建议统一用空格+逗号组合，比如
"100,20 140,50 140,90" -
fill 和 stroke 要分开设置：只设
stroke不设fill，默认填充为黑色；想透明就得显式写fill="none" - 常见误区：以为“少一条边”是没闭合——其实是
stroke="none"或fill="transparent"导致看不见，不是路径问题
polyline：不闭合，适合趋势线、骨架线、路径草稿
<polyline> 严格按点顺序连线，首尾不相连，适合不需要封闭的线条场景。
- 写法示例：
<polyline points="10,20 40,30 60,10 80,40" stroke="red" fill="none"></polyline>→ 画四段连通的折线，无填充 -
points 值必须偶数个：写成
"10,20 30,40 50"（末尾多一个 50），浏览器会丢掉 50，只画前两对点 - 默认有黑色填充，不加
fill="none"会导致遮挡背景，尤其在叠加绘制时容易误判为“没画出来” - 比多个
<line>更轻量，DOM 节点少、解析快，适合动态生成的图表线或图标结构线
怎么选？看语义，别硬套
不是“哪个更高级”，而是“哪个更准确”：
立即学习“前端免费学习笔记（深入）”；
- 单条线段 → 用
<line>：属性最少、语义最准、不易出错 - 多个点连成开放路径（如折线图、箭头骨架）→ 用
<polyline> - 需要首尾闭合（三角形、星标、徽章、心形）→ 直接用
<polygon>，别试图用<polyline>多写一遍起点
坐标的坑比语法还多
真正卡住人的往往不是标签怎么写，而是数据本身：
- 所有坐标都是相对于
<svg>左上角 (0,0)，不是页面位置；偏移或裁剪先查viewBox是否合理 - y 轴向下为正，和数学坐标系相反，做图表时注意是否要翻转 y 值
- 坐标值不支持单位，
x1="10px"会被当无效丢弃；负数和小数合法，比如y="−2.5" - 复杂图形（五角星、六边形）不用手算，直接复制成熟坐标串更稳——资料里已整理好常用形状的
points
