area标签的coords必须基于原始图像naturalWidth/naturalHeight的整数像素坐标，不可直接使用设计稿或PDF导出的缩放后坐标；需校验usemap关联、poly顶点偶数及Y轴翻转，并在响应式场景中用JS动态重算缩放比。
area 标签的 coords 坐标必须基于原始图像像素尺寸
电子文档（如 PDF、设计稿）导出的坐标不能直接填进 coords——它只认原始图片文件的 naturalWidth 和 naturalHeight，不是截图宽高、不是 CSS 渲染尺寸、也不是设计工具标注的“画布坐标”。
常见错误是把 Figma 或 Adobe XD 里标出的 “x=120, y=85” 当成绝对像素值直接复制，结果热区偏移。这些工具默认输出的是相对画布或缩放后视图的坐标，而 <area> 要求的是：以原图左上角为 (0,0)，单位为整数像素，且 x/y 必须严格对应原始图像的宽高。
- 用浏览器打开图片真实 URL（右键图片 → “在新标签页中打开”），看地址栏或开发者工具的
naturalWidth/naturalHeight - 若原始图是 1920×1080，但你从 75% 缩放的设计稿里量出坐标 (144, 64)，实际应换算为
144 / 0.75 = 192，64 / 0.75 ≈ 85→coords="192,85,..." - 导出坐标时务必清除空格、换行、小数点；
coords只接受逗号分隔的整数，例如"192,85,240,130"合法，"192, 85, 240, 130"（含空格）会截断
shape="poly" 多边形坐标还原最容易漏掉顶点顺序和偶数校验
PDF 或矢量图导出的多边形路径常带 SVG 坐标系（Y 轴向上）、小数精度、或首尾重复点，这些都会让 <area shape="poly"> 失效或渲染错乱。
浏览器对 poly 的 coords 是零容忍解析：顶点必须成对出现（总数为偶数），顺序决定区域朝向，不自动闭合但隐式连接首尾——如果导出数据是 [x1,y1,x2,y2,x3,y3,x1,y1]（重复起点），就会变成 8 个数字，末尾多出一对导致区域塌缩或偏移。
立即学习“前端免费学习笔记（深入）”；
- 先确认导出坐标是否为 SVG 格式；若是，需翻转 Y 值：
y' = naturalHeight - y - 用 JS 快速校验：将坐标字符串
split(',')后检查length % 2 === 0，否则丢弃或补零 - 删掉重复的首尾点；例如原始路径有 5 个顶点，导出为 10 个数字（含重复），就只取前 8 个
- 所有值四舍五入为整数：
Math.round(parseFloat(val))，不能留小数
usemap 关联失败导致坐标还原白做
哪怕坐标完全正确，只要 <img usemap="#xxx"> 和 <map name="xxx"> 不严格匹配，整个热区就静默失效——浏览器不报错、不警告，只是点击没反应。
这种失败在 PDF 转网页流程中高频出现，因为自动化工具常把 map 的 name 写成随机 ID 或带下划线/大写，而 usemap 漏掉 # 或大小写不一致。
-
usemap值必须带#前缀，<map>的name绝对不能带 - 逐字节比对：大小写、连字符、下划线、空格全算在内；
"#product-map"≠"#product_map"≠"#Product-Map" - 调试时右键图片 → “检查”，看能否高亮到对应
<map>元素；不能高亮，说明关联断了 - 建议统一用小写+连字符命名，并同时写
id和name：<map id="doc-section" name="doc-section">
响应式页面里 coords 会随缩放失准，必须 JS 动态重算
PDF 转网页后常加 max-width: 100% 或 width: 100vw 实现自适应，但这会让原始坐标彻底失效——coords="0,0,100,100" 在 1200px 宽原图上是 100×100 区域，缩放到 375px 宽后仅剩约 31×31px，远低于触控最小推荐尺寸。
没有纯 HTML/CSS 方案能修复，唯一可靠做法是监听缩放并重写 coords 值。注意：不能只靠 window.resize，还要监听 img.load，因为图片加载完成前 naturalWidth 是 0。
- 计算缩放比：
scale = img.offsetWidth / img.naturalWidth（矩形图可用 width，但最好用offsetWidth/offsetHeight分别算 X/Y 比例） - 遍历所有
<area>，对每个coords字符串split(',').map(n => Math.round(n * scale))，再join(',')回去 - 绑定事件：
img.addEventListener('load', updateCoords)+window.addEventListener('resize', updateCoords) - 避免频繁重绘：加
throttle或用ResizeObserver替代resize事件
坐标还原最麻烦的不是数值计算，而是整个链路里任意一环（设计稿坐标系、导出格式、usemap 匹配、缩放时机）出偏差，都会让热区“看起来写了，其实没用”。尤其当 PDF 转网页由脚本批量处理时，必须把 coords 清洗、usemap 校验、缩放适配这三步固化为 pipeline 环节，不能依赖人工核对。
