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 数量不对时，浏览器会截断或错位解析，行为不可预测——调试时得先核对这两个字段是否完全合规。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
