coords坐标必须基于naturalwidth/naturalheight计算，浏览器始终以图片原始尺寸为基准解析，与css缩放、width/height属性无关；填错即失效且无报错，响应式需js按缩放比动态重算。
coords 坐标必须基于 naturalWidth/naturalHeight 计算
浏览器解析 coords 时，永远以图像原始尺寸（intrinsic size）为基准，不是 CSS 渲染宽高，也不是 width/height 属性值。哪怕你用 style="width: 50%" 把图压成一半，coords="100,50,200,150" 仍要对应原图 1200×800 上的像素位置——填错就点不中，且控制台不报错。
获取原始尺寸必须用：img.naturalWidth 和 img.naturalHeight；不能依赖 img.width 或 getBoundingClientRect()，后者反映的是缩放后布局尺寸。
- 若图片未加载完成，
naturalWidth为 0，需在img.onload或ResizeObserver回调中读取 -
width/height属性显式声明可提升渲染稳定性，但不改变coords的计算基准 - 导出坐标时，务必打开图片原始 URL（右键“在新标签页中打开”），确认实际尺寸再取数
响应式缩放坐标的正确公式
当 被 CSS 缩放（如
max-width: 100%）、容器约束或 DPR > 1 导致渲染尺寸 ≠ 原始尺寸时，必须手动重算 coords：
缩放比 = img.offsetWidth / img.naturalWidth（X 方向），img.offsetHeight / img.naturalHeight（Y 方向）
对每个坐标值单独处理：
— 偶数索引（x 坐标）乘 scaleX，
— 奇数索引（y 坐标）乘 scaleY，
— 结果四舍五入为整数，再拼回 coords 字符串
- 不要直接用百分比写进
coords，浏览器会静默忽略（如"10%,20%,100%,120%"） - 多边形顶点顺序不能错位：6 个数是 3 个点，10 个数是 5 个点，奇数个会导致最后一个 y 值丢失
- 避免在
DOMContentLoaded立即执行缩放逻辑——此时图片可能还没 layout 完成，offsetWidth不准
shape 类型决定 coords 格式和数值合法性
shape 不是装饰属性，它硬性约束 coords 的长度、顺序和取值范围：
-
shape="rect"：必须且仅能有 4 个整数，格式为"x1,y1,x2,y2"，且满足x1 且 <code>y1 ，否则区域不可点击 -
shape="circle"：必须且仅能有 3 个整数，格式为"cx,cy,r"，r必须 > 0，负数或小数会被截断为 0 -
shape="poly"：必须偶数个整数，至少 6 个，每对构成一个顶点；浏览器自动闭合路径，无需重复首坐标 -
shape="default"：不接受coords，写了也无效
写错 shape 值（如 shape="square"）不会报错，但浏览器降级为 rect 或直接跳过该 area，热区消失。
为什么 SVG 是更稳的现代替代方案
用 <svg></svg> 替代 <map></map> + <area>，能绕过所有坐标换算陷阱：
-
<rect x="10%" y="20%" width="20%" height="15%"></rect>直接写百分比，天然响应式 - 整个 SVG 设
width="100%"; height="auto"，配合viewBox="0 0 [origW] [origH]"，坐标自动适配 - 图像作为
<image href="..."></image>嵌入，preserveAspectRatio="xMidYMid meet"控制缩放行为 - 事件绑定在 SVG 元素上，用
event.target区分区域，无需usemap匹配和 DOM 顺序覆盖问题
真正容易被忽略的是：area 的坐标失效往往不是代码写错，而是你忘了——usemap="#name" 的 # 不能漏，且 <map name="name"></map> 必须存在且大小写完全一致；多区域重叠时，DOM 后出现的 area 会盖住前面的，z-index 无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
