poly的coords必须是偶数个整数，按顺序两两成对作为顶点坐标，以图片左上角为原点（0,0）；写错顺序、漏点、混用小数或单位均导致区域失效。
直接说结论：poly 的 coords 必须是偶数个整数，按顺序两两成对作为顶点坐标，且所有点都以图片左上角为原点（0,0）计算；写错顺序、漏掉点、混用小数或单位，都会导致区域失效。
poly 的 coords 坐标怎么写才有效
poly 不是“画线工具”，而是按严格顺序连接顶点生成封闭区域。浏览器自动闭合首尾，所以不需要重复第一个点。
- 正确格式：
coords="10,20,80,15,95,60,40,75"→ 解析为 (10,20)→(80,15)→(95,60)→(40,75)→自动回到 (10,20) - 坐标必须全为整数，不能带单位（如
px）、不能是小数（10.5会被截断或忽略） - 点数不限，但至少要 3 对（6 个数字），否则无法构成多边形
- 如果某点超出图片尺寸，该点仍参与连线，但点击无效区域可能变小或错位
为什么 poly 区域点不中、点击没反应
常见不是代码语法错，而是坐标和图片实际像素没对齐。尤其在高 DPR 屏幕或缩放页面时，固定像素坐标会偏移。
- 用开发者工具的「元素选择器」悬停
<area>，看高亮是否贴合预期区域；不贴合就说明坐标不准 - 确保
<img>没被 CSS 缩放（如width: 100%+ 父容器变宽），否则原始像素坐标失效 -
usemap引用的name和<map>的name（或id）必须完全一致，包括大小写和空格 - 多个
<area>重叠时，DOM 中靠前的优先响应，后写的会被遮挡
poly 和 rect/circle 的 coords 本质区别
三者都依赖图片原始尺寸（naturalWidth/naturalHeight），但解析逻辑不同：
立即学习“前端免费学习笔记（深入）”；
-
rect：只认前 4 个数字，多余被忽略；顺序固定为x1,y1,x2,y2，且要求x1 < x2、y1 < y2 -
circle：只认前 3 个数字；x,y,r中r必须 > 0，否则区域消失 -
poly：读取全部数字，两两配对；允许自相交、凹多边形，但坐标顺序错一位，整个形状就翻车
最易被忽略的是：没有 JS 干预时，poly 区域完全静态，它不会随图片缩放重算。要做响应式热区，得监听 resize + 手动按比例换算坐标，或者改用 SVG 替代。
