coords定位不准是因浏览器不重算像素值，SVG通过viewBox天然支持响应式缩放，热区坐标自动适配；必须用map时需JS动态重算并校验缩放比与物理尺寸。
coords 定位不准不是你填错了，是它天生就不支持响应式——浏览器压根不重算这些像素值。
为什么coords在响应式下必然偏移
coords 绑定的是图片的 naturalWidth 和 naturalHeight，也就是文件原始尺寸。只要用了 max-width: 100%、width: 50%、Flex/Grid 拉伸，或者任何非固定 CSS 尺寸，渲染尺寸就和 natural 尺寸不一致。浏览器不会自动把 coords="100,200,300,400" 换算成当前显示尺寸下的坐标——这不是 bug，是规范如此。
常见现象包括：热区“飘”到图片外、移动端点击完全失准、缩放后只有左上角一小块能点中。
用<svg>替代<map>是最省心的方案
SVG 的 viewBox 天然支持比例缩放，所有坐标（<rect>、<circle>、<polygon>）都会随容器自动适配，无需 JS 干预。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把原图作为
<image href="...">嵌入<svg>，viewBox="0 0 [w] [h]"填原始宽高 - 热区用
<a>包裹，支持href、target、aria-label，无障碍和 SEO 友好 - CSS 只需设
width: 100%; height: auto;，不用管coords缩放逻辑 - 导出坐标时仍按原始图尺寸写（比如
x="120"），viewBox会自动映射
示例片段：
<svg viewBox="0 0 1200 800" width="100%" height="auto"> <image href="map.jpg" width="1200" height="800"/> <a href="/area1"><rect x="100" y="200" width="150" height="80"/></a> <a href="/area2"><circle cx="800" cy="300" r="60"/></a> </svg>
必须用<map>时，JS 动态重算的硬性条件
如果 CMS 或 legacy 系统强制要求 <map>，JS 重算可行但极易翻车，以下四点缺一不可：
- 必须同时监听
img.addEventListener('load', update)和window.addEventListener('resize', update)；只绑resize会导致懒加载图片初始热区错位 - 每次执行前检查
img.naturalWidth > 0，否则naturalWidth为 0，缩放比变成NaN -
shape="circle"的半径也要缩放（不是只缩cx/cy），否则小图上圆会撑满整个区域 - 移动端物理尺寸建议 ≥ 44×44px，换算后要校验：比如原始图 1200×800，显示宽 360px，则横向缩放比为
360 / 1200 = 0.3，coords="500,300,50"→"150,90,15"
纯 CSS 覆盖层适合简单矩形热区
热区少、形状规则（如按钮式区域）时，<div> + 百分比定位比 JS 更轻量、更稳定。
- 父容器设
position: relative，<img>设pointer-events: none - 热区用
<button>或<div>绝对定位，坐标用百分比：top: 25%; left: 30%; width: 15%; height: 10% - 务必加
aspect-ratio: [w] / [h]保形，防止拉伸变形 - 移动端补
touch-action: manipulation，避免 iOS Safari 忽略小区域点击
注意：coords 本身无法自适应，所谓“自适应缩放”本质是绕过它——要么换技术栈（SVG），要么换实现思路（CSS 覆盖或 JS 重算）。最常被忽略的，是忘记校验缩放后热区的物理尺寸是否满足可点击最小阈值。
