热区失效最常见原因是usemap与map name字符串不严格匹配；coords基于原始尺寸，css缩放会导致偏移；建议统一小写命名、避免dom隔离、用svg替代map/area。
usemap="#name" 和 <map name="name"></map> 必须逐字节匹配
热区失效最常见原因不是坐标错，而是关联断开。浏览器对 usemap 和 name 的匹配是严格字符串比对：大小写、空格、连字符、# 是否存在，一个字符都不能差。usemap="mymap"（漏 #）或 usemap="#MyMap" 对应 <map name="mymap"></map>（大小写不一致），整个热区就静默失效——控制台无报错，点击无响应。
建议做法：
- 统一用小写字母 + 连字符命名，例如
usemap="#china-provinces"配合<map name="china-provinces"></map> - 把
<map></map>紧挨在<img>后面，避免因 DOM 顺序或模板引擎插入位置导致意外隔离 - 不要把
<map></map>放进<picture></picture>、<figure></figure>或 Shadow DOM 里，否则外部usemap失效
coords 坐标基于原始尺寸，CSS 缩放后必然偏移
coords 是像素绝对值，绑定的是图片的 naturalWidth / naturalHeight，不是 offsetWidth / offsetHeight。只要用了 width: 100%、max-width 或任何 CSS 尺寸控制，热区就会“点不准”。这不是 bug，是规范设计如此。
临时补救方案（仅适用于简单缩放）：
- 监听
window.resize和img.onload，用img.naturalWidth / img.offsetWidth算出缩放比 - 遍历所有
<area>，用正则解析coords字符串，对每个数值乘以对应方向缩放比，再赋回area.coords - 避免用
shape="default"做兜底——它会捕获所有未覆盖区域，干扰调试且不可预测
更稳妥的做法：改用 SVG，<svg viewbox="0 0 w h"></svg> 天然支持百分比坐标和缩放，无需 JS 换算。
移动端 poly 热区最小尺寸必须 ≥44px
iOS Safari 对小面积 poly 区域响应迟钝，尤其顶点密集或形状细长时。即使视觉上看起来可点，实际点击可能被忽略或触发错误区域。
实操要点：
- 用图像编辑工具导出坐标后，检查每个多边形的包围盒（bounding box）宽高是否 ≥44px
- 对小图标类热区，优先用
shape="rect"或shape="circle"，它们的坐标容错率更高 - 加
style="touch-action: manipulation"到<img>上，减少 iOS 300ms 点击延迟干扰 - 别依赖
title属性做提示——部分旧浏览器显示不可靠，aria-label在<area>上被忽略，只能靠alt或 JS 动态浮层
现代项目优先用 SVG 替代 map/area
原生 <map></map>/<area> 只适合静态图、固定尺寸、区域极少的场景。一旦涉及响应式、hover 高亮、拖拽调整、动态数据驱动或多层级嵌套，维护成本陡增。
SVG 方案优势明显：
- 坐标天然用百分比或 viewBox 单位，自动适配缩放，无需 JS 重算
coords - 每个
<path></path>或<polygon></polygon>可直接绑定click、mouseenter、focus，支持完整 ARIA 属性 - 能用 CSS 控制 hover/focus 样式，也能用
transform做交互动画 - 配合 D3.js 或 topojson，可直接渲染中国各省 GeoJSON 数据，坐标精度远超手工
poly
真正容易被忽略的是：当热区数量超过 20 个、或需要实时根据用户行为高亮/禁用某些区域时，<map></map> 的 DOM 结构无法支持状态管理，而 SVG 元素可直接绑定数据属性并用 JS 控制 class 或 style——这时候硬撑 area 只会让后续迭代越来越难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
