poly的coords无需手动重复首点，浏览器会自动闭合；重复会导致顶点解析错误、渲染偏移或area被忽略；坐标总数须为偶数且≥6，顺序错一位将全乱；缩放失效因coords基于原始尺寸；shape值必须严格小写"poly"。
poly的coords是否需要手动重复首点
不需要，而且重复了反而容易出问题。浏览器对 shape="poly" 的 coords 是自动闭合的：解析完所有坐标对后，会隐式把最后一个点连回第一个点，形成封闭区域。
常见错误是导出工具或手写时多加了一组首点，比如三角形写成 "30,40,90,40,60,120,30,40"（8个数）。这会导致第4对坐标覆盖逻辑结构，部分浏览器渲染偏移、点击失效，甚至整个 area 被忽略。
- 正确写法（3个顶点）：
"30,40,90,40,60,120"→ 解析为 (30,40)→(90,40)→(60,120)→自动回到(30,40) - 错误写法：
"30,40,90,40,60,120,30,40"→ 浏览器当成4个顶点，第4点(30,40)可能与前序点构成异常夹角，破坏区域判定 - 坐标总数必须是偶数，且 ≥6；奇数个数字（如7个）会让最后一值被丢弃，实际只取前6个，但你根本不知道哪一对被截断
coords坐标顺序错一位会怎样
错一位就全乱。因为浏览器不校验语义，只按“每两个连续整数为一个(x,y)”硬解析。比如本该是 "120,80,135,60,150,80"（三角形），若误写为 "120,80,135,60,150,80,10"（7个数），最后的 10 被丢弃，看起来没变；但若写成 "120,80,135,60,10,150,80"（7个数），就会解析成 (120,80)→(135,60)→(10,150)，而 80 被丢弃——第三个点完全错位。
- 现象：热区飘在图外、变成细线、点击无响应
- 调试方法：用
console.log(coords.split(',').length)确认是偶数；再用for循环两两打印，验证每对是否落在图内合理位置 - 工具导出坐标时，务必关闭“输出相对坐标”“带小数”“含单位”等选项
图片缩放后poly热区失效的根本原因
coords 值永远基于图片原始尺寸（naturalWidth/naturalHeight），和当前显示宽高无关。CSS缩放、width/height 属性、viewport变化都不会让浏览器重算坐标。
立即学习“前端免费学习笔记（深入）”；
- 直接后果：缩放 2 倍后，原
coords="100,200"对应的物理点击位置已偏移一倍距离，热区“悬空” - 临时解法：用 JS 监听
resize或图片加载完成，按比例重算 coords（需先获取img.naturalWidth和img.clientWidth） - 长期建议：改用 SVG
<polygon>，天然支持响应式坐标系统，无需手动换算
shape="poly"拼写错误或大小写混用的静默失败
浏览器只接受严格小写的 "poly"。写成 Shape="Poly"、shape="polygon"、shape="POLY"，都会导致该 area 完全不注册热点——没有报错，也不响应点击，排查时极难定位。
- 检查点：确认
shape属性值是纯小写"poly"，且前后无空格 - 关联风险：如果同一
map中其他area写对了，唯独这个错，你会误以为是坐标问题，反复调 coords - default 必须是最后一个
area，且不能带coords；否则前面的 poly 区域可能被遮盖或判定优先级异常
area 元素是否出现在 map 的 DOM 子树里，再鼠标悬停确认高亮框是否贴合预期轮廓。 
