微信X5内核对usemap零容错，必须严格匹配#、大小写、空格及连字符；coords按natural尺寸计算，CSS缩放必偏移；SVG是唯一稳定方案，需用viewBox和百分比坐标；真机测试不可替代。
usemap="#name" 与
微信 X5 内核对 usemap 的解析零容错：缺 #、大小写不一致、多空格、连字符位置不同，都会导致整个热区静默失效，控制台不报错，点击无响应。
常见错误包括：usemap="mymap"（漏 #）、usemap="#ChinaMap" 对应 <map name="china-map"></map>（大小写+连字符不一致）、usemap="#provinces "（末尾有空格）。
实操建议：
- 统一用小写字母 + 连字符命名，例如：
usemap="#china-provinces"配合<map name="china-provinces"></map> -
<map></map>标签必须紧跟在<img>后面，不能被<picture></picture>、<figure></figure>或 Shadow DOM 包裹隔离 - 避免动态插入
<map></map>，X5 对 DOM 变更后重绑定热区支持极差
coords 坐标永远按 naturalWidth/naturalHeight 计算，CSS 缩放必偏移
这不是 bug，是规范行为：coords 值只认图片原始像素尺寸，和 width: 100%、max-width、transform: scale()、object-fit 全部无关。桌面调好的坐标，一上微信（尤其安卓 X5）就“飘”。
临时补救仅限简单场景（如单张固定图）：
- 监听
img.onload和window.resize，计算缩放比：scaleX = img.naturalWidth / img.offsetWidth，scaleY = img.naturalHeight / img.offsetHeight - 对每个
area.coords字符串做正则解析，按shape类型分别缩放：rect四值都乘对应方向缩放比；circle前两坐标乘各自缩放比，半径乘Math.min(scaleX, scaleY)；poly所有偶数位（x）乘scaleX，奇数位（y）乘scaleY - 别依赖 CSS 动态修正 ——
transform和object-fit不触发 coords 重映射
真正在微信里稳定可用的方案是 SVG 替代
用 <svg></svg> 实现热区，是目前唯一能绕过 X5 对 <map>/<area></map> 各种限制的现代方案。它不依赖 JS 补偿、天然响应式、坐标可写百分比、缩放自动重映射，还支持无障碍和事件委托。
关键实操点：
-
<svg viewbox="0 0 [origW] [origH]" width="100%" height="auto"></svg>——viewBox必须填原始图尺寸，否则比例错乱 - 用
<image href="map.png" width="100%" height="100%"></image>铺底图，所有热区元素（<rect></rect>、<path></path>等）绝对定位其上 - 坐标换算公式：
x = (px / naturalW) * 100 + "%"，y = (py / naturalH) * 100 + "%"，不能直接复用 PS 导出的像素坐标 - 顶点多的
<path></path>在 iOS 微信中可能悬停卡顿，移动端建议拆成多个<rect></rect>或<circle></circle>
安卓 X5 下 getBoundingClientRect 获取热区位置不可靠
想用 JS 拿到某个 <area> 在屏幕上的真实位置？别试了。X5 内核下 area.getBoundingClientRect() 返回的 top/left/width/height 常为 0 或错误值，且不随图片缩放更新。
原因在于 X5 并未真正将 <area> 渲染为可交互 DOM 节点，只是在底层做了坐标映射，JS 层无法访问真实几何信息。
如果必须做 JS 交互（比如 hover 提示），只能走 SVG 方案 —— 它的 <rect></rect>、<path></path> 是真实 DOM，getBoundingClientRect() 可用，addEventListener 可靠。
最后提醒一句：微信开发者工具完全模拟不了 <map>/<area></map> 的真实行为，所有测试必须用真机 + 文件传输助手发本地 index.html 验证。X5 的热区逻辑藏得深，表面正常往往意味着根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
