响应式下 coords 偏移是设计使然，不是 bug；原生 的 coords 绑定图片 naturalwidth/height，css 缩放不触发热区重映射，导致移动端点击失准；svg 方案通过 viewbox 和百分比坐标天然支持响应式，js 重算需监听 load/resize 并按 shape 类型缩放 coords。
响应式下 coords 偏移是设计使然，不是 bug
原生 <map></map> 的 coords 始终绑定图片的 naturalWidth 和 naturalHeight，CSS 缩放（如 width: 100% 或 max-width）不会改变坐标系，只会让热区“漂”在错误位置。这不是你取点不准，而是机制本身不支持动态适配——浏览器从不重算像素值。
常见错误现象：area 在桌面显示正常，移动端点击完全失准；开发者工具里 area 元素存在、alt 也写了，但点击无反应；控制台没有报错，只有静默失效。
- 别指望 CSS
transform: scale()或object-fit能修正 coords —— 它们只影响渲染，不触发热区重映射 -
poly区域顶点数超过 50 个时，Firefox 鼠标悬停检测明显变慢，Chrome 无感，但移动端普遍卡顿 - 若图片通过
<picture></picture>切换 srcset，naturalWidth可能异步变化，load事件监听必须绑定到最终加载的<img>实例，而非父容器
SVG 替代方案：天然支持百分比与 viewBox
用 <svg></svg> 内嵌 <image></image> + <rect></rect>/<circle></circle>/<path></path> 是目前最可控的现代方案。坐标可直接用百分比（%）或基于 viewBox 的单位，缩放时自动重映射，无需 JS 补偿。
关键点：
-
<svg width="100%" height="auto" viewbox="0 0 [origW] [origH]"></svg>中的viewBox必须填原始图片尺寸，否则比例错乱 -
<image href="plan.png" width="100%" height="100%"></image>用于铺底图，所有热区元素绝对定位在其上 -
<rect x="10%" y="20%" width="15%" height="12%"></rect>这类写法在任意视口下都精准，且支持aria-label、focusable="true"、tabindex - 缺点：不能直接复用 PS 导出的像素坐标，需手动转为相对值或用脚本批量换算（例如
x = (px / naturalW) * 100 + "%"）
JS 动态重映射 coords 的轻量实现
如果必须沿用 <map></map>（比如 legacy 系统或 CMS 模板限制），就绕不开 JS 重算。核心逻辑是监听 img.load 和 window.resize，再按 shape 类型分别缩放 coords 字符串。
实操建议：
- 记录原始宽高：
const img = document.querySelector('img[usemap]'); const w0 = img.naturalWidth; const h0 = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / w0; const scaleY = img.offsetHeight / h0;（注意：用offsetWidth/Height，不是clientWidth/Height） - 对每个
<area>解析coords：const coords = area.coords.split(',').map(Number);，再按shape分支处理：-
rect：缩放全部 4 个值（coords[0]*scaleX, coords[1]*scaleY, ...） -
circle：前两个是圆心，第三个是半径，全部乘对应缩放比（半径用scaleX或scaleY均可，但保持一致） -
poly：偶数个值，每对(x,y)分别乘scaleX和scaleY
-
- 更新：
area.coords = coords.map(n => Math.round(n)).join(',');（Math.round防止小数导致 Safari 忽略）
为什么 rwd-image-maps 库不推荐新项目使用
rwd-image-maps（jQuery 插件）确实能自动处理 coords 重映射，但它依赖全局 $、强制 DOM ready 后执行、不支持模块化导入，且最后一次更新停留在 2019 年。在现代构建流程中，它会带来三类实际问题：
- Webpack/Vite 项目里需额外配置 jQuery 全局暴露，否则
$.rwdImageMaps()报 undefined - 它监听
window.load，但现代 SPA 页面可能多次动态插入图片，插件无法感知后续新增的<img> - 内部用
parseInt解析 coords，遇到科学计数法或带空格的字符串（如某些导出工具生成）直接崩解 - 真正省事的做法是抄 20 行原生 JS（见上一节），删掉 jQuery 依赖，还能用
ResizeObserver替代resize事件提升性能
复杂点不在实现，而在验证：每次图片尺寸变化后，必须人工在真机上点一遍所有热区——因为模拟器的 DPR 和缩放行为与真实设备不同，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
