coords必须基于img.naturalwidth/height的原始像素值，而非css渲染尺寸；shape与coords格式须严格匹配；usemap与map name须大小写及符号完全一致；响应式场景需js按缩放比动态重算坐标。
coords 坐标必须基于图片 natural 尺寸，不是 CSS 渲染尺寸
浏览器只认 img.naturalWidth 和 img.naturalHeight 下的像素值。哪怕你用 CSS 把一张 1200×800 的图缩成 300×200 显示，coords 还得按 1200×800 算——直接在缩放后的画布上量坐标，99% 会点不中。
常见错误现象：
– 开发者工具里截图量出 “150,80”，填进 coords 却没反应
– 设计稿标注是 @2x，你照抄 “200,100”，但没除以 window.devicePixelRatio
– 给 img 加了 max-width: 100%，却还硬写死像素坐标
实操建议：
– 临时禁用所有影响尺寸的 CSS（比如加 img { width: auto !important; height: auto !important; }）再量
– 用 JS 打印 img.naturalWidth 确认原始尺寸
– 高清屏下，Photoshop 量出的物理像素需除以 window.devicePixelRatio 得逻辑像素
shape 和 coords 格式必须严格一一对应
浏览器对 coords 字符串只做逗号切分和类型转换，不校验语义。错一位、多一个空格、少一对数，区域就消失或偏移到天边。
关键规则：
– shape="rect" → coords="x1,y1,x2,y2"，且必须满足 x1 且 <code>y1 （左上 + 右下，不是宽高）<br>– <code>shape="circle" → coords="cx,cy,r"，r 必须是正整数（10.5 或 -3 会被静默丢弃）
– shape="poly" → coords="x1,y1,x2,y2,x3,y3"，至少 6 个整数（3 对顶点），顶点顺序决定区域走向，首尾无需重复（浏览器自动闭合）
– 所有数字间只能用英文逗号分隔，严禁空格、中文逗号、换行；"100, 200" 中的空格会导致第二值被截断为 "200" 后面全丢
容易踩的坑：
– 写成 shape="rectangle" 或 shape="oval"：浏览器不识别，降级为 rect 或忽略
– 导出 poly 坐标时带了小数或百分比（如 "50.5,120"），area 只接受整数像素值
– 用在线生成器导出 coords 后没清理空格和换行
usemap 和 map name 必须大小写+符号精确匹配
这是最常被忽略却最致命的一环。usemap 的值带 #，而 <map></map> 的 name 属性不带 #，二者必须完全一致（区分大小写、连字符、下划线都不能错）。
典型失效场景：
– <img usemap="#floor-plan"> 对应 <map name="Floor-Plan"></map>（大小写不一致）
– <img usemap="#floor_plan"> 对应 <map name="floor-plan"></map>（下划线 vs 连字符）
– <map></map> 放在 <template></template> 里，或写在 外，DOM 中查不到
– 页面多个 <map></map>，name 重复，旧版 Safari 绑定随机
实操建议：
– 在控制台运行 document.querySelector('img[usemap]') 和 document.querySelector(`map[name="${img.usemap.slice(1)}"]`) 看是否都能取到元素
– 动态插入 <map></map> 时，确保它在 <img> 渲染完成后再挂载到 DOM
响应式场景下 coords 必须手动重算，不能靠 CSS 自适应
原生 <area> 不支持百分比坐标（HTML5 已废弃），也不感知缩放。只要图片尺寸随视口变化，硬编码的像素坐标必然错位。
可行方案：
– 纯静态页且图片尺寸固定：直接写死 coords 即可
– 响应式图（如 width: 100% 或 vw）：用 JS 监听 resize，按缩放比例动态更新每个 area.coords
– 更稳妥的替代：改用 <svg></svg> + <path></path>，天然支持 viewBox 和事件委托，复杂热区维护成本更低
JS 重算要点：
– 先获取图片原始尺寸：const natW = img.naturalWidth
– 再获取当前渲染宽度：const curW = img.offsetWidth
– 缩放比 = curW / natW，然后遍历所有 area，把每个坐标乘以该比值并取整
– 注意防抖 resize 事件，避免频繁重算
coords，而是当图片缩放、DPR 变化、响应式切换时，所有坐标还能保持严丝合缝——这要求你从一开始就把坐标系、原始尺寸、设备逻辑像素这三者绑在一起理解，而不是当成“量完填进去就完事”的一次性操作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
