shape属性仅接受rect、circle、poly、default四个严格小写值,拼写、大小写或空格错误均导致area被静默忽略;coords格式须与shape严格匹配,且以原图像素为基准,不随CSS缩放变化。

shape 属性只接受四个严格小写的值:rect、circle、poly、default。写错大小写、拼写或加空格,浏览器直接忽略该 area,不报错也不响应点击。
为什么 shape="polygon" 或 shape="rectangle" 不工作
浏览器对 shape 的取值不做容错——它不是“尽量匹配”,而是“完全匹配”。shape="polygon"、shape="rectangle"、shape="oval"、Shape="Rect" 全部被静默丢弃,对应区域失效。常见现象是:代码看着正常,鼠标悬停没手型,点击无跳转。
-
poly不能写成polygon(少一个字母都不行) -
rect不能写成rectangle或Rect -
circle不能简写为circ(部分老文档提过,但现代标准不认) -
default必须全小写,且不能带coords
coords 格式必须和 shape 一一对应
coords 是纯数字字符串,英文逗号分隔、**零空格**;浏览器按 shape 值硬拆数字,不校验逻辑,错一位就偏移。
-
shape="rect"→ 必须且仅能有 4 个数:coords="x1,y1,x2,y2"(左上 + 右下,不是宽高) -
shape="circle"→ 必须且仅能有 3 个数:coords="cx,cy,r"(半径不能 ≤ 0) -
shape="poly"→ 至少 6 个数(3 个点),偶数个;coords="x1,y1,x2,y2,x3,y3"自动闭合,不用重复首点 -
shape="default"→ 不写coords,写了也无效
响应式场景下 coords 会严重偏移
coords 始终以原图像素尺寸为基准,和 CSS 缩放无关。比如原图 1600×1200,你用 width: 200px 显示,coords="0,0,1600,1200" 仍只覆盖缩放前的左上角一小块。
立即学习“前端免费学习笔记(深入)”;
- 不要靠肉眼估算缩放后的坐标
- 避免在响应式布局中硬写
coords - 复杂热区优先用
SVG替代map+area,它天然支持比例缩放和事件绑定
最易被忽略的是:错误的 shape 值不会触发控制台报错,只会让热点“消失”得毫无征兆;而 coords 数量不对时,浏览器会截断或错位解析,行为不可预测——调试时得先核对这两个字段是否完全合规。



















