coords 必须按图片原始尺寸手动填写像素值，shape 类型决定格式：rect需4个整数（x1,y1,x2,y2），circle需3个（cx,cy,r），poly需偶数个顶点坐标；所有值以naturalWidth/naturalHeight为基准，不随CSS缩放变化。
coords 不是算出来的，是你按图片原始尺寸（intrinsic size）手动填进去的像素值；填错、顺序错、类型不匹配，热区就点不中，浏览器也不会报错。
coords 值怎么填才对：看 shape 类型定格式
浏览器只认三类 shape 对应的坐标结构，填错一个数，整个 area 就失效：
-
shape="rect"：必须且仅能填 4 个整数，coords="x1,y1,x2,y2"，左上角和右下角——注意不是宽高，也不是中心点 -
shape="circle"：必须且仅能填 3 个整数，coords="cx,cy,r"，圆心 + 半径；半径不能为 0，也不能超图边界（否则可能被截断） -
shape="poly"：必须填偶数个整数，coords="x1,y1,x2,y2,x3,y3,..."，每两个一组是顶点；首尾不自动闭合，少一对或多一对，形状就歪或漏边
所有值都以图片左上角为 (0,0)，单位是像素，跟 CSS 缩放、width/height 属性无关——哪怕你用 style="width: 50%" 把图压成一半，coords 还得按原图尺寸写。
为什么开发者工具里量的坐标总不对
常见原因不是量错了，而是没对齐「原始尺寸基准」：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 设计稿是 @2x 导出的 PNG，你直接抄标注里的像素值，忘了除以 2 →
coords被放大一倍 - 图片 HTML 里没写
width/height，但 CSS 强制设了max-width: 100%，此时浏览器仍以图片文件真实分辨率（naturalWidth）为coords基准 - 用截图插件在缩放后的页面上取点，但插件返回的是视口坐标，不是相对于原图的像素坐标
最稳的办法：打开 DevTools → Elements → 找到 img 标签 → 看右侧面板的 naturalWidth / naturalHeight，再拿这个尺寸当标尺，在 PS 或在线测距工具里量坐标。
响应式下 coords 失效的根本原因
coords 是硬编码像素值，它不会随屏幕变小而缩放——这不是 bug，是规范如此。所以当图片被 CSS 缩放后，热区位置就漂移了：
- JS 动态重算
coords可行，但极易出错：图片加载完成时机、naturalWidth是否已就绪、offsetWidth是否含 padding/border，都会导致缩放比偏差 - 用
window.onresize配合setTimeout强刷页面（比如 reload）属于反模式，破坏用户体验且不可靠 - 真正可维护的方案是放弃
<map>，改用<svg>：<rect x="10%" y="20%" width="20%" height="15%">原生支持百分比，配合viewBox和媒体查询就能自适应
如果必须用 <map>，那就把图片导出为固定尺寸（比如统一 1200×800），所有 coords 全部按这个尺寸写死，并禁止 CSS 缩放——这是线上项目最省心的底线方案。
调试 coords 是否生效的实操技巧
别靠猜，用这几个低成本方法快速验证：
- 给
area加临时样式：style="outline: 2px solid red"，虽然 outline 不显示，但配合console.log(event.clientX, event.clientY)能比对鼠标落点是否在预期范围内 - 临时把
href换成javascript:alert('hit')，点一下就知道有没有触发 - 多边形区域出问题？复制
coords字符串进 Excel，分列成两列 X/Y，画散点图看顶点顺序是否连贯
真正难的从来不是写对某一行 coords，而是整套流程里图像导出尺寸、HTML 中写的 width/height、CSS 控制逻辑、设计标注单位这四者之间一旦有一处脱节，所有热区都要重调。
