area标签失效时先查这三件事：usemap与map的name严格匹配（#仅在usemap中）、map必须为顶层元素、coords须基于图片原始像素尺寸；响应式下应弃用map/area，改用viewbox归一化坐标的svg热区。
area 标签失效时先查这三件事
热区点不中、悬停无反应，90% 情况不是代码逻辑错，而是 HTML 关联断裂或坐标失准。usemap 和 map 的 name 必须严格匹配：<img usemap="#nav-map"> 对应 <map name="nav-map"></map>，# 只出现在 usemap 值里，name 里不能带；大小写敏感；<map></map> 必须是顶层元素，不能被 <div> 或其他容器包裹。
<p>另外，<code><area shape="poly"> 的 coords 是像素值，必须基于图片原始尺寸（比如原图 1200×800），不是设计稿百分比，也不是缩放后浏览器渲染尺寸。用开发者工具临时加 border: 1px solid red 到 <img> 上，再截图比对顶点位置，能快速定位偏移。
响应式页面里 map/area 为什么总错位
<map></map> 和 <area> 的坐标系统是静态像素绑定，不随 CSS 缩放、vw 单位或图片 max-width 自适应。哪怕你给 <img> 加了 width: 100%; height: auto，coords 还是按原始宽高算——缩放后热区就漂移了。
常见“解法”如用 JS 动态重算 coords，本质是把问题复杂化：要监听 resize、读取原始图尺寸、计算缩放比、遍历所有 area、更新 coords 属性……维护成本高，移动端还要处理 devicePixelRatio。更稳的路径是直接弃用：<map></map> 适合静态文档页（比如 PDF 转 HTML 的示意图），不适合现代响应式项目。
SVG 热区必须用 viewBox + 归一化坐标
用 <svg></svg> 替代 <map></map> 不是简单换标签，关键在坐标系统设计。必须设 viewBox="0 0 100 100"（或其他归一化范围），再用 <path d="M0,0 L100,0 L100,100 Z"></path> 描述形状——所有坐标都在 0–100 范围内，和实际图片尺寸解耦。
这样做的好处：<svg width="100%" height="auto"></svg> 时，浏览器自动按比例映射；CSS 改变宽高、缩放、flex 布局都不影响热区位置；<path></path> 默认按几何轮廓 hit-testing，不是包围盒，点击边缘精准。
容易踩的坑：
• 给 <path></path> 加 transform 缩放 → 干扰 hit-testing，改用 viewBox 控制；
• d 属性没闭合（漏 Z）→ 点击区域可能透出不可控空白；
• 忘记设 fill="transparent" stroke="none" → 遮挡底层内容或触发重绘异常。
什么时候还该用 map/area
只有两个场景值得保留：
• 页面纯静态、无响应式要求（比如内部知识库的某张架构图），且热区数量少（≤5 个矩形/圆形）；
• SEO 强依赖：搜索引擎仍能解析 <area href="/product/a"> 的链接，而 SVG 内部的 <a></a> 或事件绑定需额外标注 aria-label 才友好。
除此之外，只要涉及多边形、悬停反馈、动画、键盘导航（tabindex）、或未来可能加数据驱动（比如热区颜色随 API 返回状态变），SVG 是唯一可扩展的选择。别被“<map></map> 更轻量”的直觉骗——真到改需求那天，删掉 20 行 <area> 改写成 SVG，比给旧方案打补丁快得多。
