coords坐标必须为整数且成对出现，如“10,20,80,15,95,60,40,75”，解析为(10,20)→(80,15)→(95,60)→(40,75)，自动闭合；至少3对（6个整数），顶点须顺时针或逆时针连续排列，原点为图片左上角(0,0)。
coords 坐标必须是整数，且成对出现
浏览器解析 coords 时只认逗号分隔的整数序列，每两个数字为一组 x,y 坐标。写小数（如 10.5,20.3）会被截断或忽略；带单位（如 10px,20px）直接失效；漏掉一个数导致奇数个值，整个 poly 区域就不可点击。
正确写法只有这一种：coords="10,20,80,15,95,60,40,75" → 解析为 (10,20)→(80,15)→(95,60)→(40,75)，浏览器自动闭合回起点。
- 至少要 3 对坐标（6 个整数），否则构不成封闭多边形
- 顶点顺序必须是顺时针或逆时针连续排列，不能跳着写
- 坐标原点永远是图片左上角
(0,0)，和 CSStransform、width、缩放无关
怎么拿到准确的像素坐标
别靠肉眼估，也别用设计稿标注直接抄——除非你确认该图在页面中是以 1:1 像素显示、无任何缩放、DPR=1。
最稳的方式是：把图片单独打开在浏览器中，右键「检查」，用开发者工具的元素选择器（Ctrl+Shift+C）悬停到图片上，再切到「Rendering」面板勾选「Show Rulers」，拖动标尺对齐顶点，读取像素值。
立即学习“前端免费学习笔记（深入）”；
- Photoshop / Figma 等工具里量出的坐标，要确保导出图尺寸和页面中实际渲染尺寸一致
- 高 DPR 屏幕（如 MacBook Retina）下，CSS 像素 ≠ 物理像素，
devicePixelRatio > 1时固定coords必然偏移 - 在线热区生成器（如 image-map.net）可辅助描点，但导出后仍需校验是否为纯整数、偶数个
SVG 的 points 更灵活，但计算逻辑一样
<polygon points="10,20 80,15 95,60 40,75"></polygon> 和 <area shape="poly" coords="10,20,80,15,95,60,40,75"> 用的是同一套坐标系：左上角为原点，单位像素。区别在于 SVG 可通过 <g transform="scale(0.5)"></g> 整体缩放，而 <area> 的 coords 无法响应式缩放。
如果要用 JS 动态生成正多边形顶点，可用这个函数：
function regularPolygonPoints(cx, cy, r, n, startAngle = 0) {
const points = [];
const step = (Math.PI * 2) / n;
for (let i = 0; i < n; i++) {
const angle = startAngle + i * step;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
points.push(`${Math.round(x)},${Math.round(y)}`);
}
return points.join(' ');
}注意：结果必须 Math.round() 成整数，再拼成空格分隔字符串传给 points 属性。
为什么点了没反应？大概率不是代码错，而是坐标没对齐
常见现象：<area> 标签语法完全正确，但点击区域边缘失灵、点中空白跳转、或整个区域偏移 —— 这几乎全是坐标和图片实际渲染像素没对齐造成的。
- 图片被 CSS 设置了
max-width: 100%或width: 50%？那coords就废了 - 用了
background-image而非<img alt="HTML怎么计算映射区域的多边形顶点" >？<map></map>只绑定<img usemap alt="HTML怎么计算映射区域的多边形顶点" >，不支持背景图 - 多个
<area>重叠？后写的会盖住先写的，z-index 无效，得调换顺序或拆成非重叠区域
真正可靠的方案只有两个：要么放弃 <map></map> 改用 SVG，要么用 JS 库（如 rwd-image-maps）监听窗口 resize 后按比例重算 coords。硬写死像素坐标的方案，在今天已基本只适用于固定尺寸后台管理页。
