coords必须为偶数个整数、逗号分隔、无空格无小数，顶点须连续不交叉且无需手动闭合；usemap与map的name须严格匹配；响应式下需js动态缩放或改用svg。
直接写 shape="poly" 并填一串数字进 coords，90% 情况下热区点不中——不是代码漏了标签，而是坐标格式、单位、闭合逻辑或关联关系出了硬伤。
coords 坐标字符串必须是偶数个整数，且无空格逗号分隔
浏览器只认纯数字、逗号分隔、无空格、无小数的字符串。比如 "100,200,150,180,180,220,130,240" 是合法四边形；但 "100.5,200.3"（含小数）、"100, 200"（含空格）、"100,200,150"（奇数个）都会让整个 area 失效，点击无响应。
常见错误来源：
- 用 Photoshop 或 Figma 量坐标时默认输出带小数，需手动
Math.round()或删掉小数位 - 在线工具（如 Image Map Generator）导出的 coords 默认不闭合，但更关键的是它可能带空格或换行，复制后要全选 → 删除所有空格 → 确认逗号紧贴数字
- 手写时多打一个空格或少写一个数字，DOM 中该
area就静默降级为不可点击状态
poly 不需要手动闭合首尾点，但顶点顺序必须连续不交叉
浏览器会自动将最后一个点连回第一个点形成封闭区域。所以 coords="30,40,90,40,60,120" 是合法三角形；若写成 "30,40,90,40,60,120,30,40"，反而在部分浏览器中导致解析失败或热区偏移。
顶点必须按顺时针或逆时针顺序排列，不能跳着连。例如 "0,0,100,100,0,100,100,0" 会画成 X 形，不是四边形——这种交叉多边形行为未标准化，Chrome 可能渲染为两个三角形，Safari 可能完全忽略点击判定。
usemap 和 map name 必须严格匹配，且 map 必须在 DOM 中可查
<img usemap="#worldmap"> 中的 #worldmap 必须与 <map name="worldmap"></map> 的 name 属性**完全一致**，包括大小写。id 属性无效，只认 name。
容易被忽略的坑：
-
<map></map>放在外（如里）或<template></template>内，浏览器无法关联 - 动态插入
<map></map>时，若在<img>渲染前执行，旧版 Safari 可能不识别 - 页面有多个
<map></map>，name 重复会导致绑定随机，建议加业务前缀如name="product-floorplan"
响应式图片下 coords 一定会错位，没有 CSS 原生解法
coords 单位永远是原始图片的像素，和 img 的 CSS width、max-width、缩放无关。哪怕只加一句 img { max-width: 100%; height: auto; }，热区就会整体漂移。
可行路径只有两条：
- 放弃
<map></map>，改用<svg></svg>+<polygon points=""></polygon>：天然支持 viewBox 缩放，事件委托也稳定 - 保留
<map></map>，但用 JS 监听resize和load，根据img.naturalWidth和当前img.clientWidth算缩放比，遍历重设每个area.coords
静态页、固定尺寸图用 poly 最轻量；只要涉及缩放、适配、动态图，就别硬扛——这限制从 HTML4 时代延续至今，没绕过去的捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
