HTML图像映射不支持多层嵌套，area只能直属于map；实现“点击展开子区域”需JS动态替换热区或改usemap；更优方案是用SVG，其支持真实嵌套、缩放、无障碍及响应式。
HTML 图像映射不支持多层嵌套
原生 <map></map> + <area> 机制没有“嵌套”概念，<area> 只能直接隶属于 <map></map>，不能包在另一个 <area> 或 <div> 里。浏览器遇到 <code><area>
<map>...</map> 这类写法，会直接忽略内层 <map></map>，甚至导致整个映射失效。
想实现“点击区域 → 展开子区域”，得用 JS 模拟
所谓“多层映射”，实际是：用户点击主图某块区域后，动态显示一组新的可点区域（比如弹出浮层、替换 <img>、或叠加 SVG 热区）。这不是 HTML 映射的延伸，而是交互逻辑的叠加。
- 初始
<img usemap="#main">绑定顶层<map name="main"></map> - 每个
<area>加data-submap="detail-1"，指向预定义的子热区配置 - 点击时用 JS 清空旧热区、注入新
<area>到同一个<map></map>，或切换到另一张带不同usemap的<img> - 别试图复用同一张图多个
<map></map>——usemap一次只认一个值
更稳的替代方案：用 SVG 替代
SVG 支持真实嵌套结构：<g></g> 可包含 <rect></rect>、<circle></circle>、甚至另一个 <g></g>，且每个图形元素都能独立绑定 onclick 或 data-* 属性。它比 <map></map> 更可控、可缩放、无障碍友好（加 role="button" 和 aria-label 即可）。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 把原图转为 SVG（可用在线工具或 Figma 导出）
- 用
<g id="level1">...</g>包一层主区域，再用<g id="level2" class="hidden">...</g>存子区域 - JS 控制
classList.toggle('hidden')切换层级，无需重绘 DOM - 坐标系天然基于 viewBox，响应式缩放不偏移
容易被忽略的兼容性坑
即使强行用 JS 动态改 <map></map> 内容，也要注意：
-
<area>的shape和coords是字符串，不是对象——每次更新都得重新拼接，不能只改coords属性值 - IE 和旧 Safari 不支持对已挂载
<map></map>的动态增删，需先移除再重建整个<map></map>节点 - 屏幕阅读器不会自动感知新插入的
<area>，必须手动触发aria-live区域播报变化 - 移动端 touch 事件坐标与
coords像素值不一致，需用getBoundingClientRect()做归一化换算
真正需要多层热区的场景，几乎都该放弃 <map></map>，转向 SVG 或 Canvas + 坐标判断——前者语义清晰，后者精度更高。
