coords每个数字对应像素坐标且顺序不可错：rect需x1,y1,x2,y2（左上+右下），circle需cx,cy,r（r为正整数），poly需偶数个顶点坐标（至少6个）；所有值基于图片原始尺寸，不随css缩放自适应，shape仅支持rect/circle/poly/default四小写值。
coords 里每个数字都对应一个像素坐标，顺序不能错
浏览器对 coords 字符串只做简单逗号分割和类型转换，不校验逻辑。填错顺序、多一位或少一位，热点就偏移甚至消失，而且**完全不报错**。
具体含义完全取决于 shape 值：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角(x1,y1)和右下角(x2,y2)，必须满足x1 且 <code>y1 ，否则区域不可点击 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标cx、cy，半径r（必须是正整数，10.5或-2会被静默丢弃） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：每一对xy是一个顶点，至少三对（6 个数字），浏览器自动闭合，首尾无需重复
coords 的单位和原点是固定的，不是 CSS 渲染尺寸
coords 所有数值单位都是像素，原点固定在图片左上角 (0,0)，x 向右递增，y 向下递增——但关键在于：它**严格基于图片原始尺寸（img.naturalWidth/naturalHeight）**，不是你用 CSS 缩放后的显示大小。
常见踩坑场景：
- CSS 设置了
width: 50%，但coords还按原图 800×600 写 → 热点缩成四分之一大小，点不中 - 设计稿是 @2x（dpr=2），直接把标注里的
"200,100,400,300"拿来用 → 实际应填"100,50,200,150" -
<img>没设width/height，JS 在onload前就读naturalWidth→ 可能拿到0或错误值
shape 写错会导致 coords 完全失效，但浏览器不提示
合法 shape 值只有四个：rect、circle、poly、default。其他任何字符串（比如 "square"、"oval"、"polygon"、"rectangle"）都会被浏览器忽略或降级为 rect，导致热点形状和位置完全不对。
典型现象：
-
shape="polygon"→ 浏览器当没看见，按rect解析coords，结果只取前 4 个数当成矩形 -
shape="circle"却写了 4 个数（如"100,200,30,50"）→ 浏览器只取前 3 个，第 4 个丢弃，半径变成30而非预期的50 -
coords里混入空格："100, 200"→ 第二个值截断为"200"，后面全丢
coords 不会自适应缩放，响应式必须靠 JS 动态重算
没有 CSS 属性或 HTML 机制能让 coords 随图片缩放自动调整。如果图片要适配不同屏幕或 DPR，必须用 JS 监听 img.onload 和 ResizeObserver，用 img.naturalWidth 与当前 offsetWidth 算出缩放比，再逐个映射坐标。
更现实的做法是：当项目涉及高清屏、复杂多边形、CSS 断点或已有 SVG 工作流时，直接改用 <svg></svg> 替代 <map></map> + <area>。SVG 原生支持矢量缩放、无障碍、事件委托，维护成本远低于手动维护一堆像素坐标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
