真正能落地的只有SVG替代或JS动态重算坐标两种路径；因area coords依赖图片原始尺寸，响应式缩放易致热区错位，且移动端点击识别率低，需用dataset事件委托、缓存原始coords并分shape类型缩放，但SVG方案更可靠。
直接用 <map></map> + <area> 是可行的，但人体结构图这类不规则、高精度、需响应式的场景，原生方案极易错位、难维护，不建议作为主力方案；真正能落地的，只有两种路径：一是用 SVG 替代，二是用 JS 动态重算坐标并严格锁定图片原始尺寸。
为什么 <area> 的 coords 在人体图上特别容易偏移
人体结构图通常带精细轮廓（如关节、器官边缘），而 <area shape="poly"> 的 coords 是纯像素值，完全依赖图片原始宽高。一旦页面缩放、CSS 设置 width: 100% 或容器流式布局，坐标就和视觉位置脱钩——你点“肝脏”，实际触发的是“左肺下叶”。这不是代码写错了，是规范行为。
- 浏览器永远按
img.naturalWidth/naturalHeight解析coords，不管它在屏幕上渲染成多大 - 用 Figma/Photoshop 量坐标时，必须确认导出的是未缩放原图，而非设计稿预览尺寸
- 移动端 Safari 对小热区（＜44×44px）点击识别率极低，尤其手指悬停后轻微移动，
<area>会直接忽略
如何让 data-part 成为可靠的行为入口
别在 <area> 上写 onclick="handlePart('heart')"，也不要用 href="#heart" 再靠 JS 拦截——内联逻辑无法调试，且与现代模块化（ESM、React/Vue 组件）冲突。统一走 dataset + 事件委托：
document.querySelector('map').addEventListener('click', e => {
if (e.target.tagName === 'AREA' && e.target.dataset.part) {
e.preventDefault();
const part = e.target.dataset.part;
// 触发状态更新、弹窗、API 请求等
}
});
- 每个
<area>必须带data-part="kidney-left"这类语义化属性，比解析alt或href更稳定 - 移动端需补
touchstart，否则 iOS Safari 可能不触发 click（尤其无cursor: pointer时） -
alt仍不可省：它是屏幕阅读器唯一能读出的内容，例如alt="左侧肾脏，点击查看详情"
响应式下必须重算坐标？那怎么算才不崩
如果坚持用 <map></map>，就必须监听两个时机：img.load 和 window.resize，并手动重写所有 <area> 的 coords 属性。不能只算缩放比，得按 shape 类型分别处理：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 矩形
rect：取coords.split(',')四个值，分别乘scaleX和scaleY - 圆形
circle：前两个值 × 对应缩放比，半径 ×Math.max(scaleX, scaleY)（避免椭圆） - 多边形
poly：每对x,y坐标独立缩放，不能简单整体乘一个比值 - 必须提前缓存原始
coords字符串，每次重算都基于它，而不是当前已缩放的值（否则累积误差）
这个逻辑看似简单，但真实项目中常漏掉滚动偏移、transform: scale() 干扰、或 picture 元素切换 srcset 后 naturalWidth 变更——这些细节才是上线后热区突然失灵的根源。
真正推荐的替代方案：SVG 而不是死磕 <map></map>
把人体结构图转成 SVG（用 Illustrator 导出或手写 <path></path>），天然解决所有问题：
- 坐标自动响应式：
viewBox控制比例，缩放不影响点击区域 - 每个部位可独立加
data-part、class、title，还能直接 CSS 动画 hover - 支持
pointer-events: bounding-box或fill-rule: evenodd精确控制复杂轮廓（比如肠管折叠处） - 不用操心
usemap大小写、#符号、name匹配失败这些琐碎报错
如果图源只有 PNG/JPEG，优先用在线工具（如 svgomg.com）转矢量，或让设计师提供 SVG 版本——花半天换方案，远比三天调 coords 缩放逻辑更省事。
