原生<map>的coords基于图片naturalWidth/Height硬编码，与CSS缩放无关，浏览器不自动重映射坐标，导致缩放后点击失准；必须用JS动态重算或改用SVG替代。
原生 <map> + <area shape="poly"> 不支持自适应，缩放后坐标就错位；真要响应式，必须用 JS 动态重算 coords，或直接换 SVG。
为什么 <map> 的 coords 在缩放后点不中
浏览器只认图片原始像素尺寸下的坐标，coords 值是硬编码的整数序列，和 CSS width/height、transform: scale()、object-fit 都无关。哪怕图片视觉上等比缩放了，浏览器仍按原始分辨率解析点击位置——结果就是你点在“看起来”的多边形上，实际触发的是另一块区域，甚至空白处。
常见错误现象：
- PC 上点得准，手机上全偏移
- 浏览器窗口 resize 后热区“漂移”
- 用
img { max-width: 100%; height: auto; }布局后，<area>完全失效
JS 动态重算 coords 的最小可行方案
核心是拿到原始图宽高、当前渲染宽高，按比例缩放每个顶点坐标。不能靠 getBoundingClientRect() 取实时尺寸再除，因为 <img> 和 <map> 不联动，得手动同步。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 原始尺寸必须已知：从
<img>的naturalWidth/naturalHeight读，不要用offsetWidth - 缩放比统一用
img.offsetWidth / img.naturalWidth（横向），纵向同理，但通常等比，取其一即可 -
coords是字符串，需split(',').map(Number)→ 缩放 →join(',')写回area.coords - 必须监听
resize和load（图片加载完成才可读naturalWidth）
示例片段：
const img = document.querySelector('img[usemap]');
const area = document.querySelector('area[shape="poly"]');
<p>const updateCoords = () => {
if (!img.naturalWidth) return;
const scale = img.offsetWidth / img.naturalWidth;
const raw = area.coords.split(',').map(Number);
const scaled = raw.map((v, i) => Math.round(v * scale));
area.coords = scaled.join(',');
};</p><p>img.addEventListener('load', updateCoords);
window.addEventListener('resize', updateCoords);SVG 替代方案更稳，但要注意坐标系
用 <svg> 包裹图片，再用 <polygon> 绘制热区，天然支持 viewBox 和响应式缩放。但别直接把 <map> 的像素坐标照搬过去——SVG 默认坐标系原点在左上角，单位是用户坐标，不是像素，且 viewBox 会改变映射关系。
关键差异：
-
<img>原始尺寸为 800×600，<svg viewBox="0 0 800 600">时，<polygon points="100,50 200,50 150,150">才和原coords="100,50,200,50,150,150"对齐 - 如果去掉
viewBox，改用width="100%" height="auto"，则points值仍按原始像素写，SVG 会自动缩放 - 必须把图片作为
<image>元素嵌入 SVG，而非外部<img>，否则无法保证图层对齐
容易被忽略的兼容性细节
不是所有设备都“点一下就跳”，尤其移动端 Safari 和部分安卓 WebView 对 <area> 的触摸事件支持弱。比如：
-
click事件可能延迟 300ms，或需要双击才触发 - 没有
hover效果，title属性在 iOS 上不显示 - 无障碍场景下，屏幕阅读器只读
alt，不感知多边形形状，所以每个<area>必须有准确语义化的alt - 若用 JS 拦截
click并阻止默认跳转，记得加event.preventDefault()，否则部分浏览器仍会尝试导航
真正复杂的交互（比如拖拽编辑、点是否在区域内判断、高亮反馈），<map> 就该让位给 Canvas 或 Leaflet —— 它的设计初衷只是静态跳转，不是图形引擎。
