area标签点击失效的根本原因在于coords坐标必须严格匹配图片natural尺寸，且需动态适配缩放、dpr及响应式变化，usemap与map name精确匹配是前提。
area 标签本身不响应点击，也不渲染任何内容；所谓“热点”，完全依赖 <map></map> + coords + usemap 三者严丝合缝的配合。填错一个数字、漏掉一个#、坐标没按原始尺寸算，就点不中，且浏览器从不报错。
coords 坐标必须严格匹配图片 natural 尺寸
浏览器只认 img.naturalWidth 和 img.naturalHeight 下的像素值，不是你 CSS 里写的 width: 100% 后的渲染尺寸，也不是设计稿里的 @2x 标注值。
- 如果图片是 800×600 像素，但被 CSS 缩放到 400×300 显示，
coords还得写 800×600 下的坐标，再用 JS 按比例缩放——不能直接写 400×300 下量出来的数 - 高清屏（dpr > 1）下，Photoshop 量出的 “200,100” 实际是物理像素，需除以
window.devicePixelRatio才得逻辑像素值 - 用开发者工具截图量坐标时，务必禁用所有 CSS 缩放（比如临时加
img { width: auto !important; height: auto !important; }），否则量出来就是错的
shape 和 coords 格式必须一一对应
浏览器对 coords 字符串只做简单拆分和类型解释，不校验合法性。格式错一位，区域就偏移或消失。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，不是宽高；且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：半径r必须是正整数，10.5或-3都会被忽略 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3"：至少三对坐标（6 个数字），顶点按顺时针或逆时针顺序列，首尾无需重复——浏览器自动闭合 - 所有坐标间只能用英文逗号分隔，不能有空格、中文逗号、换行；
"100, 200"中的空格会导致截断为"100"
usemap 和 map name 必须精确匹配
这是最常被忽略却最致命的一环：usemap 的值带 #，而 <map></map> 的 name 属性不带 #，二者大小写、拼写、符号缺一不可。
-
<img usemap="#floor-plan">必须对应<map name="floor-plan"></map>，写成name="Floor-Plan"或usemap="#floor_plan"都会失效 -
<map></map>必须在 DOM 中可查，不能放在<template></template>里，也不能在外；动态插入时，要确保它在<img>渲染完成后再挂载 - 页面多个
<map></map>时，name重复会导致绑定随机，尤其旧版 Safari 表现不稳定
响应式场景下 coords 必须动态重算
原生 coords 不支持百分比，也不感知缩放。只要图片尺寸随视口变化，硬编码的像素坐标必然错位。
- 监听
img.onload和ResizeObserver（比window.onresize更可靠，能捕获容器宽度变化） - 计算缩放比：
scaleX = img.offsetWidth / img.naturalWidth，同理算scaleY - 对每个
area.coords字符串执行：coords.split(',').map((v, i) => i % 2 === 0 ? v * scaleX : v * scaleY).join(',') - 高频触发时加
requestAnimationFrame节流，避免 layout thrashing
真正麻烦的不是写对一次 coords，而是让它在不同设备、不同缩放、不同 dpr 下始终对准——这时候，<svg></svg> 路径往往比 <area> 更省心，也更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
