poly coords必须为偶数个整数、无空格无小数；shape值严格小写且仅限rect/circle/poly/default；poly自动闭合无需首尾重复；coords基于原始像素，响应式需JS重算或改用SVG。
poly coords 必须是偶数个整数，且不能带空格或小数
浏览器只接受 coords 属性中纯数字、逗号分隔、无空格的字符串。比如合法值是 "100,200,150,180,180,220,130,240"（4个点，8个整数），而这些都会让 area 完全失效：
-
"100.5,200.3"（含小数） -
"100, 200"（逗号后有空格） -
"100,200,150"（奇数个数字，只剩一个y坐标没配对）
用图像工具导出坐标时，务必关闭“相对坐标”“百分比输出”“保留小数”等选项；Figma 或 Photoshop 的坐标插件默认可能带小数，要手动取整。
shape="poly" 大小写和拼写必须严格为小写 poly
shape 属性只认四个值："rect"、"circle"、"poly"、"default"。任何偏差都会导致该 area 被静默忽略——不报错、不警告、点击无反应。
-
shape="Poly"或shape="POLY"→ 大小写错误，无效 -
shape="polygon"或shape="triangle"→ 拼写错误，部分浏览器当rect处理，多数直接跳过 - 检查方法：在 Chrome 开发者工具中选中
area元素，hover 图片对应区域应有高亮反馈；没有？先查shape
poly 不需要首尾点重复闭合，但顶点顺序影响点击判定
浏览器会自动将最后一个点连回第一个点，形成封闭区域。所以 coords="30,40,90,40,60,120" 就是合法三角形——不要写成 "30,40,90,40,60,120,30,40"，重复首点在 Safari 和旧 Edge 中可能导致解析失败或区域偏移。
立即学习“前端免费学习笔记（深入）”；
- 顶点必须按顺时针或逆时针连续排列，避免交叉（如
"0,0,100,100,0,100,100,0"会画成 X 形） - 交叉多边形未标准化：Chrome 可能填充异常，Firefox 可能拒绝渲染，iOS Safari 点击判定不可靠
- 复杂图形建议拆成多个简单
poly区域，比单个高边数多边形更稳定
coords 基于原始图片尺寸，缩放后必须 JS 重算或换 SVG
coords 单位永远是图片原始像素（naturalWidth/naturalHeight），不是显示尺寸。哪怕你用 img { width: 50%; height: auto; }，coords="0,0,100,100" 仍指原始图左上角 100×100 区域——现在它只占屏幕约 50×50px，点不准是必然的。
- 静态页、固定尺寸图可用
poly，最轻量 - 响应式场景下没有 HTML/CSS 原生解法：CSS 缩放、
max-width、视口变化都会让热区漂移 - 可行路径只有两个：
→ 改用svg+polygon（天然支持缩放与 viewBox）
→ 保留map，但用 JS 监听load和resize，按比例重算每个coords值（需缓存原始宽高）
最容易被忽略的是：如果 img 在 picture、figure 或 Shadow DOM 里，usemap 绑定会断开——map 必须和 img 在同一 DOM 上下文，且不能被隔离。
