html多边形热区coords必须基于图片naturalwidth/naturalheight手动取整数坐标，显式闭合（首点复位），且usemap与map name须逐字节一致（含#），三者任一出错均导致静默失效。
HTML 中 poly 多边形热区的 coords 不是“算”出来的，而是按图片原始尺寸（naturalWidth/naturalHeight）手动取点、手动填写的整数坐标序列。浏览器不解析几何形状，也不校验是否闭合或是否构成有效多边形——填错一位，热区就失效，且控制台零报错。
coords 值必须基于 naturalWidth/naturalHeight 手动填
你截图量的、设计稿标出的、CSS 缩放后看到的位置，全都不作数。浏览器只认图片文件本身的像素尺寸：
- 打开 Chrome DevTools → 找到
<img>元素 → 右侧面板看naturalWidth和naturalHeight（比如 1200×800） - 所有
coords值都以这个尺寸为标尺：左上角是 (0,0)，x 向右递增，y 向下递增 - 用 PS、Figma 或在线工具（如 image-map.net）导入原图，在该尺寸下描点导出坐标
- 别抄 @2x 图的标注值——如果原图是 2x，得把标注值除以 2；如果没确认是“按原始尺寸截图”，直接填就飞了
shape="poly" 的 coords 格式必须严格匹配
poly 不是“随便写一堆点”，它对数字个数、顺序、闭合逻辑都有硬性要求：
- 必须填偶数个整数：
coords="x1,y1,x2,y2,x3,y3,..."，每两个一组是顶点坐标 - 浏览器不会自动闭合——
coords="10,20,30,40,50,60"只画两条线段，不是三角形；点击行为不可靠，部分浏览器直接忽略 - 正确写法是显式重复起点：
coords="10,20,30,40,50,60,10,20"（三个顶点 + 首点复位） - 顶点顺序建议顺时针或逆时针连续排列，避免交叉；交叉多边形在某些浏览器中可能渲染异常或点击失效
usemap 和 map name 必须逐字节一致（含 #）
这是热区静默失效的最高发原因，且毫无提示：
-
<img usemap="#floor-plan">✅ ——usemap值必须带#，且后面字符串和<map name="floor-plan"></map>完全一致（大小写、连字符、空格都不能差） -
usemap="floor-plan"❌ 漏#，整个映射断开 -
usemap="#Floor-Plan"❌ 大小写不一致，断开 -
<map name="floor_plan"></map>❌ 下划线 vs 连字符，断开
真正麻烦的从来不是写几行 HTML，而是坐标取点时忘了 natural 尺寸、poly 没闭合、usemap 少了个 #——这三个地方任一出错，热区就“看起来存在，实际点不中”，而且你查半天也看不到错误信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
