poly坐标必须为偶数个且≥6个数字，按x1,y1,x2,y2顺序配对；coords以原图naturalWidth/Height为基准，shape值仅接受小写rect/circle/poly/default，拼写错误或大小写错误将导致area失效。
poly坐标必须是偶数个数字，每两个一组代表一个顶点
浏览器把 coords 当作纯数字序列，按顺序两两配对：第1–2位是第一个点 x1,y1，第3–4位是第二个点 x2,y2，以此类推。奇数个数字会被截断——比如 coords="10,20,30,40,50" 实际只取前4个，50 被丢弃。
最少要6个数字（3个点），否则不构成有效多边形；常见错误是只描了2个点（4个数字），结果区域不可点击或渲染异常。
-
shape="poly"不需要、也不应该手动重复首点闭合——浏览器会自动连接末点回起点 - 顶点顺序建议顺时针或逆时针连续排列，避免交叉线段（否则热点可能意外失效）
- 相邻顶点间距不宜小于8px，尤其在移动端，太密的点反而导致点击判定失败
coords数值永远以原图naturalWidth/naturalHeight为基准
哪怕你用CSS把 <img> 缩放到 300×200 显示，只要原图是 1600×1200，所有 coords 就必须按 1600×1200 的像素网格来算。浏览器根本不读CSS宽高，只认 img.naturalWidth 和 img.naturalHeight。
调试时直接看开发者工具里的“Computed”面板没用——那里显示的是渲染尺寸，不是坐标系基准。
立即学习“前端免费学习笔记（深入）”；
- 懒办法：给
<img>加width和height属性（不是CSS），强制渲染尺寸与原始一致 - 稳办法：用JS读取
img.naturalWidth，再按缩放比动态重算coords - 响应式场景下硬写固定像素坐标，99%会偏移；别指望浏览器自动适配
shape="poly"拼错成"polygon"或大小写错误就彻底失效
shape 属性只接受四个严格小写的值：rect、circle、poly、default。写成 shape="Polygon"、shape="polygon"、shape="Poly"，浏览器静默忽略，对应 <area> 完全不响应点击——控制台不报错，页面也不提示，就是点不动。
- 别依赖拼写容错：没有浏览器会把
"polygon"当"poly"处理 - 大小写敏感：大写开头或全大写一律无效
- 检查方法：删掉其他
<area>，单独留这一条，用鼠标悬停看是否出现手型光标
描点工具导出的coords常含空格或换行，必须清理
像 MapEdit 这类工具导出的 HTML，coords 值里可能带空格、换行或中文逗号，例如 coords="10 , 20 , 30 , 40" 或 coords="10,20\n30,40"。浏览器不校验格式，但会把空格和换行当分隔符，导致解析错位。
- 正确做法：用正则
.replace(/\s+/g, '')清掉所有空白，再确保只用英文逗号分隔 - 验证方式：复制
coords字符串进控制台，执行"10,20,30,40".split(',').length，结果必须是偶数且 ≥6 - 别信编辑器语法高亮——它不校验
coords合法性，只看标签结构
