多边形热区偏移主因是coords未按原图像素尺寸取值或顶点顺序/数量错误；须用原图宽高取整数坐标，确保coords为偶数个整数，usemap与map name严格一致，移动端需保证触控目标≥44×44px。
poly coords 怎么填才不偏移
多边形热区偏移，90% 是因为 coords 值没按原始图片像素尺寸取，或者顶点顺序/数量出错。浏览器不会报错，只会静默失效——你点的地方没反应，但看不出哪里错了。
实操建议：
- 用 Photoshop 钢笔工具沿图形边缘描一遍，导出路径 → 用脚本把锚点转成
x,y序列（注意：只取整数像素，不要小数） - 在线工具如 image-map.net 可直接上传图、拖点生成
coords字符串，生成后立刻复制进 HTML - 临时给
<img>加border: 1px solid red，再截图比对顶点是否落在图形边缘上；别信 UI 稿里标出的“相对百分比”，必须基于原图宽高（比如原图是 1200×800，就按这个尺寸取点） -
coords必须是偶数个整数，例如三角形写成"100,50,200,50,150,150"（6 个数），少一个或多个空格，Firefox 和 Safari 就直接忽略整个<area>
usemap 和 map name 匹配失败怎么查
热区完全没反应，大概率不是 JS 错了，而是 HTML 关联断了。usemap="#my-map" 和 <map name="my-map"> 必须逐字节一致：# 只出现在 usemap 值里，name 值里不能有；大小写敏感；不能含空格或中文；<map> 必须是独立标签，不能嵌在 <div> 或其他容器里。
调试方法：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements 面板，检查
<map>是否有name属性，值是否和usemap的 # 后部分**完全相同** - 右键图片 → “检查元素”，确认
<img>渲染出来了，且没被display: none、visibility: hidden或pointer-events: none挡住 - 临时删掉所有 CSS，排除样式干扰；特别是某些重置样式会全局设
pointer-events: none
移动端点击区域为什么总点不准
不是坐标错了，是物理尺寸不够。iOS 和 Android 系统级点击判定只认包围盒尺寸，要求可触控目标最小 44×44 CSS 像素——哪怕你用 clip-path 切出一个 20×20px 的星形，空白区域依然能误触，而视觉上的“尖角”反而点不中。
正确做法：
- 先用
padding把容器撑到至少 44×44px（例如padding: 12px 24px），再在这个安全区域内用clip-path或 SVG 裁形状 - 别用
transform: scale()放大热区——它骗不过系统点击检测 - 如果必须用
<map>，图片得固定尺寸（不缩放），否则缩放后坐标系和视觉完全脱节；响应式页面中，<map>/<area>天生不可靠
为什么别拿 area 当按钮用
<area> 是为静态图片热区设计的，不是 UI 组件方案。它不支持 hover、focus、键盘导航，也没办法动态更新坐标。一旦拼接图尺寸变化、页面缩放、或用户截屏查看，所有 coords 都得重算——而且错一位、少一个数、或多一个空格，整个区域就静默失效。
真正可控的替代：
- 用 SVG：
<path d="M0,0 L200,20 L160,100 L40,100 Z">天然适配缩放，pointer-events: visiblePainted默认只响应填充/描边区域 - 用 Canvas +
isPointInPath()手动判断点击位置，适合需要运行时动态生成热区的场景 - 用绝对定位 + 透明伪元素覆盖，配合
getBoundingClientRect()和鼠标坐标做手动判定（适合简单多边形）
最常被忽略的一点：把 clip-path 当成“缩小点击区”的手段，其实它根本不影响点击范围——只是裁视觉，盒子还是原来那么大。
