area的shape属性仅支持rect、circle、poly、default四种小写值；其他值如oval、triangle等均被忽略并退化为default行为；coords格式须严格匹配shape：rect需4个坐标（x1,y1,x2,y2），circle需3个（cx,cy,r），poly至少6个（偶数个顶点坐标）。
area 的 shape 属性支持哪几种值
shape 属性只接受四个合法值：rect、circle、poly、default。浏览器忽略任何其他字符串（比如 ellipse 或 triangle），会退化为 default 行为（即整个图片区域），但实际中极少主动使用 default。
rect 坐标怎么写才不会错
矩形热区必须用左上角和右下角两个点定义，格式固定为 coords="x1,y1,x2,y2"，且要求 x1 且 y1 。常见错误是把右下角坐标输反（如写成 "100,50,20,120"），导致热区不可见或位置飘移。
- 坐标原点在图片左上角，x 向右递增，y 向下递增
- 不要加单位（不能写
"100px,50px,..."） - 如果图片缩放了但
coords没重算，热区就点不中——这是响应式页面里最常被忽略的硬伤
circle 和 poly 的 coords 格式差异
circle 只需三个数字：coords="cx,cy,r"，顺序不能换；poly 是任意数量的 x,y 对，按顺时针或逆时针顺序列出所有顶点，首尾不必闭合（浏览器自动连线闭合）。
-
circle示例：coords="150,80,30"表示圆心在 (150,80)，半径 30px -
poly示例：coords="10,10,90,10,90,90,10,90"是个矩形；"20,30,60,10,100,40,80,80"是个四边形 - 多边形顶点太多时容易漏掉某对坐标，建议用编辑器高亮逗号分隔，或导出自图形工具后人工校验点数是否为偶数
为什么 default 很少用，又为什么不能省略 shape
default 对应整个图片区域，等价于没设 shape 时的兜底行为。但它无法与其他热区共存——只要有一个 default，其他 area 就全失效（点击永远触发它）。而且 HTML 规范不要求必须写 shape，但省略后浏览器按 rect 解析 coords，若你本意是画圆却漏写 shape="circle"，坐标就会被误读为矩形左上+右下，结果完全不对。
所以：每个 area 都该显式声明 shape，别依赖默认；default 仅用于兜底单热区场景，复杂映射中基本不用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
