area标签shape="poly"需显式闭合多边形，coords必须为偶数个整数、首尾坐标一致且无空格/单位/小数，shape属性仅认小写rect/circle/poly/default，响应式下需JS重算或改用SVG。
area 标签的 shape="poly" 不会自动闭合多边形，必须显式重复首顶点；coords 字符串里只要出现一个小数、空格或奇数个数字，整个热区就彻底失效。
coords 必须手动闭合，且总数为偶数
浏览器不会把最后一个点连回第一个点。写 coords="10,20,30,40,50,60" 只画出两段线，不是三角形，点击不可靠甚至被忽略。正确写法是补上起点：coords="10,20,30,40,50,60,10,20"——8 个整数，构成封闭三角形。
常见错误：
- 工具导出坐标默认不闭合，直接粘贴就漏首点
- 误以为“3 个点 = 6 个数字”够用，结果少写一对（n 边形需 2n 个整数，且首尾坐标必须一致）
- 复制时带入空格或换行，如
"10, 20,30,40"→ 浏览器只取到"10"，后面全截断
所有 coords 值必须是整数，且无单位
coords 只接受纯整数像素值，单位恒为原始图片的 naturalWidth/naturalHeight 像素。任何小数、百分比、px 后缀都会导致解析失败。
立即学习“前端免费学习笔记（深入）”；
典型失效写法：
-
"100.5,200.3"→ 小数，截断为"100,200"，后续全丢 -
"100px,200px"→ 含单位，整个字符串被拒 -
"100, 200, 150, 180"→ 空格分隔，只识别"100"，其余失效
修复建议：用 Math.round() 或正则 .replace(/\.(\d+)/g, '') 清洗浮点数；导出工具务必关闭“相对坐标”和“导出小数”选项。
shape 属性大小写敏感，拼写不能错一个字母
shape 只认四个小写字符串："rect"、"circle"、"poly"、"default"。写成 shape="Poly"、shape="polygon" 或 shape="triangle" 都静默失效——area 元素还在 DOM 里，但完全不响应点击。
调试方法：
- 打开开发者工具，选中
<area>元素，看shape属性是否高亮显示（有效）还是灰掉（无效） - 检查
usemap="#xxx"和<map name="xxx">的name是否完全一致（区分大小写，且usemap要带#，<map>的name不带）
响应式页面里 poly 坐标必然错位，别指望 CSS 适配
coords 是死像素值，不随 img { width: 100%; height: auto; } 或视口缩放变化。哪怕只是加了 transform: scale(0.9)，热区也会整体漂移。
可行方案只有两个：
- 放弃
<map>，改用<svg>内嵌<polygon>—— 天然支持viewBox和缩放，坐标系稳定 - 保留
<map>，但用 JS 监听resize和load，按img.naturalWidth / img.offsetWidth比例重算每个coords值（注意缓存原始尺寸，避免反复读取 layout）
硬写固定像素 + CSS 缩放的组合，在 2026 年仍是已知无法绕过的兼容性陷阱——它不是 bug，是规范从 1997 年起就定死的行为。
