poly的coords必须为偶数个整数、无空格逗号分隔，少于6个数或含小数/空格将失效；无需闭合首尾点，顶点须顺时针或逆时针排列避免交叉；shape属性严格区分大小写且仅支持rect/circle/poly/default；coords单位恒为原始图片像素，响应式场景下需JS重算或改用SVG。
poly的coords必须是偶数个整数，且按顶点顺序排列
浏览器只接受纯数字、逗号分隔、无空格的coords字符串，比如"100,200,150,180,180,220,130,240"——这是4个点构成的四边形。少于6个数字（即少于3个点）会被忽略；奇数个数字会导致最后一个坐标被截断，整个热区失效。
常见错误是导出坐标带小数（如"100.5,200.3"）或空格（"100, 200"），这些都会让area完全不响应点击。工具取坐标时务必确认输出为整数像素值，并关闭“相对坐标”或“百分比”选项。
poly不需要手动闭合，但顶点顺序影响渲染可靠性
浏览器会自动将最后一个点连回第一个点，形成封闭区域。所以coords="30,40,90,40,60,120"就是合法三角形，**不要写成"30,40,90,40,60,120,30,40"**——重复首点在部分浏览器中反而导致解析失败或区域偏移。
顶点应按顺时针或逆时针连续排列，避免交叉（如"0,0,100,100,0,100,100,0"会画成X形，不是四边形）。交叉多边形行为未标准化，不同浏览器可能渲染不同、点击判定不一致。
立即学习“前端免费学习笔记（深入）”；
shape="poly"拼错就彻底失效，大小写和拼写都不能错
shape属性只认四个小写值："rect"、"circle"、"poly"、"default"。任何偏差都会让该area退化为不可点击状态：
-
shape="polygon"→ 被忽略，热点消失 -
shape="Poly"或shape="POLY"→ 大小写敏感，无效 -
shape="triangle"→ 不报错但不工作，可能被当成rect处理
检查时直接在开发者工具里看area元素是否被浏览器识别为有效热区：选中后，hover图片对应区域应有高亮反馈；否则先查shape拼写。
响应式场景下poly坐标会完全错位，这不是bug而是设计限制
coords单位永远是原始图片的像素，不随CSS缩放、width/height设置或视口变化而调整。哪怕只用img { max-width: 100%; height: auto; }，坐标也会漂移。
没有CSS或HTML原生方案能修复这点。可行路径只有两个：
- 放弃
<map>，改用<svg>内嵌<polygon>，天然支持缩放与坐标系变换 - 保留
<map>但用JS监听resize和load，根据图片实际渲染尺寸重算坐标（需缓存原始图宽高，再按比例缩放每个coords值）
静态页、固定尺寸图用poly最轻量；只要涉及缩放、适配、动态图，就别硬扛——这坑已经存在二十年，没绕过去的捷径。
