coords坐标必须基于图片naturalWidth/naturalHeight手动量取，而非渲染尺寸；shape决定coords格式（rect/circle/poly），需严格匹配；响应式下须JS动态重算缩放比，或改用SVG实现真正响应式。
coords 坐标必须按原图 naturalWidth/naturalHeight 手动量取
浏览器根本不读 CSS 渲染尺寸，coords 的所有数值都以图片文件自身的固有尺寸（即 img.naturalWidth 和 img.naturalHeight）为基准。你在设计稿里量的坐标，必须严格对应这张图原始像素宽高，而不是它在页面上被缩放后的大小。
常见错误包括：
- 用 Figma 或 Chrome DevTools 在缩放后的页面上直接取点，得到的是视口坐标，不是原图坐标
- 设计稿是 @2x 导出的 2400×1600 图，你抄标注里的 “400,300,800,600”，却没除以
window.devicePixelRatio（通常是 2），结果填进 HTML 的是两倍大的坐标 -
标签没写
width/height属性，又在DOMContentLoaded阶段就 JS 读naturalWidth，拿到 0 或 NaN
最稳做法：打开 DevTools → Elements → 找到 img 元素 → 右侧面板确认 naturalWidth 和 naturalHeight 值 → 拿这个尺寸当标尺，在 PS、Sketch 或在线像素尺工具中重新量坐标。
shape 类型决定 coords 格式和数值个数
浏览器只认四个 shape 值：rect、circle、poly、default。其中 default 不需要 coords；其余三者必须严格匹配格式，否则热区失效且无报错。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，不是宽高，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心 x、y + 半径，r必须是正整数（10.5或-2会被静默丢弃） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：每两个数是一对顶点，总数必须为偶数，至少 6 个（3 个点）；浏览器自动闭合，首尾不需重复
注意：coords 字符串里不能有空格，比如 "100, 200" 中的空格会导致第二值截断为 "200" 后面全丢。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
响应式页面中 coords 不会自适应，必须 JS 动态重算
coords 不支持百分比，也不响应 CSS 缩放——这是规范限制，不是 bug。只要 被
max-width: 100%、transform: scale() 或容器约束改变了渲染尺寸，硬编码的 coords 就会偏移。
动态重算的关键步骤：
- 等图片加载完成：
img.onload或ResizeObserver（比window.onresize更可靠） - 获取原始尺寸：
img.naturalWidth/img.naturalHeight - 获取当前渲染尺寸：
img.offsetWidth/img.offsetHeight（确保图片已 layout 完成） - 计算缩放比：
scaleX = offsetWidth / naturalWidth，scaleY = offsetHeight / naturalHeight - 逐个解析并缩放：
area.coords.split(',').map(Number).map((v, i) => Math.round(i % 2 === 0 ? v * scaleX : v * scaleY)).join(',')
特别注意：poly 的坐标必须严格保持偶数个，缩放时奇索引（x）乘 scaleX，偶索引（y）乘 scaleY，顺序错一位整个形状就翻转。
真正省心的方案是放弃 map + area，改用 SVG
JS 动态重算 coords 成本高、易出错，尤其遇到高清屏（dpr > 1）、CSS 断点、旋转或复杂多边形时，逻辑迅速失控。SVG 是更现代、更可控的替代路径：
- 把原图作为
<image>嵌入<svg>，设preserveAspectRatio="xMidYMid meet" - 热点用
<rect x="10%" y="20%" width="20%" height="15%">，直接写百分比 - 整个
<svg>设为width: 100%; height: auto;，所有坐标自动响应 - 点击事件绑定在 SVG 元素上，用
event.target区分区域
容易被忽略的一点：SVG 的 viewBox 属性才是响应式缩放的核心，它让内部坐标系与容器尺寸解耦——这正是 <map> 缺失的底层能力。
