<p>coords必须为偶数个数字、顶点顺序连续不自交、首点不可重复；正n边形顶点用三角函数生成：const step = Math.PI 2 / n; for (let i = 0; i < n; i++) { const a = startAngle + i step; points.push(cx + r Math.cos(a), cy + r Math.sin(a)); }</p>
area poly的coords怎么写才不触发解析异常
浏览器对 area 的 coords 属性极其敏感：少一个数字、多一个空格、首点重复，都可能让整个区域静默失效。它不是“尽力而为”，而是“错即无”。
必须满足三个硬性条件：
-
coords中数字个数必须为偶数，每两个构成一个x,y顶点，例如"10,20,50,30,40,80"是合法的 3 点多边形 - 顶点顺序需为顺时针或逆时针连续排列，不能交叉（自相交多边形在 Safari/IE 中常被跳过）
- 不要手动重复第一个点 ——
"10,20,50,30,40,80,10,20"看似“闭合”，实则可能因解析器差异导致坐标对错位，变成(10,20)→(50,30)→(40,80)→(10,20)之外的意外组合
调试时可临时给 <img> 加 style="outline: 2px solid red"，再用开发者工具的“截图叠加”功能比对坐标落点。
正多边形顶点怎么算才不用手敲6个点
硬编码顶点是维护灾难的起点。正 n 边形本质是圆上等分点，用三角函数生成最稳。
立即学习“前端免费学习笔记（深入）”；
核心公式（JavaScript）：
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(`${x},${y}`);
}
return points.join(' ');
}注意：
-
startAngle单位是弧度，顶部朝上要传-Math.PI / 2，不是-90 - 结果用于
<polygon points="{{pts}}">或拼进area coords（需四舍五入为整数，Math.round(x)） - 若用于
area，记得把空格替换成逗号：pts.replace(/ /g, ',')
图片缩放后热区偏移怎么办
coords 是绝对像素值，只要图片 CSS 宽高改变、transform: scale()、或响应式断点切换，所有坐标立刻失效 —— 这不是 bug，是设计如此。
可行解只有两个，别信“微调 margin 就行”：
- 用
<svg>替代<map>：天然矢量、自动缩放、支持hover和z-index，<polygon points="...">坐标直接相对 SVG 画布，无需换算 - JS 动态重算
coords：监听resize和load，按图片原始尺寸与当前getBoundingClientRect()比例缩放每个数值，例如newX = oldX * currentWidth / originalWidth
别用 CSS background-image 配伪元素做热区 —— 无法语义化、无障碍支持差、alt 文本丢失。
SVG polygon的points属性和area coords有啥本质区别
表面都是“一串坐标”，但底层逻辑完全不同：
-
<area shape="poly" coords="...">：坐标系绑定到原始图片像素，无单位、不可缩放、无事件捕获能力（只响应click） -
<polygon points="x1,y1 x2,y2 ...">：坐标系是 SVG userSpace，可被<g transform="scale(2)">统一缩放，支持fill、stroke、hover、pointer-events，且坐标可含小数
真正麻烦的从来不是“怎么画出形状”，而是“这个形状在不同设备、不同缩放、不同交互状态下是否还准确响应”。area 把所有问题锁死在像素层，polygon 把控制权交还给开发者 —— 这就是为什么复杂区域映射，最终几乎都会滑向 SVG。
