coords坐标超出图片边界时浏览器静默裁剪，x或y越界值被截断为naturalWidth/naturalHeight，导致多边形塌缩、翻转或退化为线段/点，热区失效或响应异常。
coords坐标超出图片边界会怎样
浏览器不会报错，但热区可能完全失效或行为异常——这不是 bug，是规范定义的“静默裁剪”行为。超出部分被忽略，剩余有效顶点仍参与渲染，但形状可能严重变形甚至退化为线段或点。
poly多边形坐标越界时的具体表现
当shape="poly"的某个coords值超出img.naturalWidth或img.naturalHeight，浏览器按像素坐标系直接截断：x 超过 naturalWidth → 当作 naturalWidth，y 超过 naturalHeight → 当作 naturalHeight。结果常是顶点被“吸边”，多边形塌缩、翻转或只剩一条细线。
- 例如原图 800×600，
coords="100,50,900,200,400,700"→ 实际解析为 (100,50)→(800,200)→(400,600)，三点连成钝角三角形，而非预期的不规则四边形 - 若所有 y 坐标都 > naturalHeight（如全写成 1000），最终所有点 y=600，整条线压在底边，点击几乎不可触发
- Safari 对越界坐标的容忍度更低，偶有整个
area被跳过不注册
rect 和 circle 越界时的隐性陷阱
shape="rect"要求 x1 且 <code>y1 ，越界后可能违反该条件：比如原图宽 1000，<code>coords="950,10,1050,60" → 实际 x2 被截为 1000，变成 "950,10,1000,60"，区域变窄；若 x1 本身 > naturalWidth（如 1020），则 x1=x2=1000，矩形退化为垂直线，无法响应点击。
-
shape="circle"中半径r越界更危险：若cx=50, cy=50, r=200在 100×100 图上，圆心虽在图内，但大部分区域在图外，热区仅剩左上角一小块扇形 —— 表面看“能点”，实则响应范围远小于预期 - 没有浏览器会警告你 r 太大，
r值只要为正整数就接受，哪怕它让整个圆飘在图外
为什么调试时很难发现越界问题
开发者工具里 area 元素始终存在，coords 字符串也显示正常，控制台无错误；热区“看起来”有高亮（部分浏览器会渲染越界后的裁剪轮廓），但点击无反应或响应位置偏移。根本原因在于：浏览器只校验数字格式和配对数量，不校验坐标是否落在 natural 尺寸内。
立即学习“前端免费学习笔记（深入）”；
- 检查方法必须手动比对：
Math.max(...xCoords) 且 <code>Math.max(...yCoords) - 用
getBoundingClientRect()测热区位置毫无意义——它返回的是渲染后的位置，不是 coords 原始语义 - 最稳妥的做法：取点时严格基于
img.naturalWidth和img.naturalHeight做约束，而不是截图工具显示的当前视口尺寸
