coords必须基于图片naturalwidth/naturalheight手动填写整数像素值，shape决定格式（rect需4个、circle需3个、poly需偶数个），usemap与map name须逐字节匹配（含#），响应式下coords不自适应，推荐用svg替代。
coords 坐标必须按 naturalWidth/naturalHeight 手动填像素值
浏览器只认图片文件本身的分辨率，不是你 CSS 里写的 width: 100% 或设计稿里的 @2x 标注。哪怕图被缩成 200×150 显示，coords 还得按原始 800×600 填——填错一个数，热区就点不中，而且浏览器完全不报错。
常见错误现象：
- 用截图工具在缩放后的页面上取点，直接抄“200,150”，结果热区偏移
- Photoshop 量的是物理像素（比如 @2x 图上标 400,300），没除以
window.devicePixelRatio，导致 coords 翻倍 - 开发者工具里看到的
offsetWidth是渲染尺寸，不能当坐标基准
正确做法：
- 打开 DevTools → Elements → 找到
<img>→ 右侧面板看naturalWidth和naturalHeight - 用这个尺寸当标尺，在 PS 或在线测距工具里量坐标
- 所有值都填整数，不要小数、负数、空格或中文逗号
shape 类型决定 coords 格式，填错一位整个 area 失效
shape 和 coords 必须严格配对，浏览器不做合法性校验，只按规则拆分字符串。格式错、顺序错、数量错，热区就静默消失。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，不是宽高；且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心 + 半径；r必须是正整数，10.5或-3全部被忽略 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3"：至少三对坐标（6 个数字）；顶点按绘制顺序列，首尾**不自动闭合**，但某些旧版 Safari 要求手动重复首点才能识别
注意：coords 字符串里只能用英文逗号分隔，"100, 200" 中的空格会导致截断为 "100"，area 直接失效。
usemap 与 map name 必须逐字节匹配，漏一个 # 就全挂
<img usemap="#floor-plan"> 和 <map name="floor-plan"></map> 不是“差不多就行”，而是大小写、连字符、# 符号全部要对齐。匹配失败时，area 完全不响应，控制台也不报错，是最难排查的一类问题。
-
usemap值必须带#，<map name></map>值绝对不能带 - 写成
usemap="#Floor-Plan"或name="floor_plan"或usemap="floor-plan"，都会绑定失败 -
<map></map>必须在 DOM 中可查：不能在<template></template>里，不能放在外，动态插入时得等<img>渲染完成后再挂载
调试建议：Chrome 开发者工具中右键图片 → “检查”，看是否能高亮对应 <map></map>；如果不能，基本就是匹配失败。
响应式场景下 coords 不会自适应，硬编码必漂移
coords 是纯像素值，没有百分比、不感知缩放、不响应 ResizeObserver —— 这不是 bug，是 HTML 规范如此。只要图片用 CSS 缩放或视口变化，热区位置就会偏。
- 用
window.onresize+setTimeout强刷页面属于反模式，破坏体验且不可靠 - JS 动态重算 coords 理论可行，但极易出错：图片加载时机、
naturalWidth是否就绪、getBoundingClientRect()是否含 border/padding，都会让缩放比偏差 - 真正可维护的方案是放弃
<map></map>，改用<svg></svg>：<rect x="10%" y="20%" width="20%" height="15%"></rect>原生支持百分比和 viewBox 缩放 - 如果必须用
<map></map>，最省事的做法是导出固定尺寸图（如统一 1200×800），所有 coords 按此写死，并禁止 CSS 缩放
移动端尤其要注意：最小热区建议 ≥ 44×44px 物理像素，否则 iOS Safari 可能无响应——这和 coords 值无关，但和实际点击成功率强相关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
