coords必须严格匹配shape类型：rect为x1,y1,x2,y2（4个整数，x1<x2且y1<y2），circle为cx,cy,r（3个整数，r>0），poly为偶数个整数顶点坐标（至少6个），原点为图片左上角，单位为像素，不随CSS缩放自适应。
coords 坐标值怎么写才有效
<area> 标签的 coords 属性不是自由输入的数字串，它必须严格匹配 shape 类型的坐标规则。填错格式会导致区域完全不响应点击，且浏览器不会报错，只能靠调试工具检查是否命中。
常见错误现象：coords="10,20,30,40" 用在 shape="circle" 上——这会被忽略，因为圆只需要三个数（圆心 x、y 和半径 r）；反过来，用 shape="rect" 却只写三个数，也会失效。
-
shape="rect"：必须且仅能填 4 个值，顺序为x1,y1,x2,y2（左上角和右下角） -
shape="circle"：必须且仅能填 3 个值，顺序为cx,cy,r（圆心 x、y，半径） -
shape="poly"：填 偶数个值，每两个为一个顶点x,y，至少需要 6 个（即三角形）
coords 坐标原点在哪、单位是什么
坐标系原点是图像左上角像素点（x=0, y=0），x 向右递增，y 向下递增，单位是 像素（px），且必须是整数。小数（如 10.5）会被截断为 10，但不报错。
注意：这些坐标是相对于 <img> 元素本身的尺寸，不是相对于页面或容器。如果图片被 CSS 缩放（如 width: 50%），coords 仍按原始图片分辨率计算——这是最容易踩的坑。
立即学习“前端免费学习笔记（深入）”；
- 原始图是 800×600，你用
<img src="..." width="400">显示，coords还得按 800×600 写，不能除以 2 - 想适配缩放？要么用
<svg>替代，要么用 JavaScript 动态换算，coords本身不支持百分比或响应式 - 用开发者工具选中
<area>，鼠标悬停时 Chrome 会高亮对应区域，这是验证坐标的最快方式
poly 多边形 coords 怎么避免漏点或顺序错乱
shape="poly" 的 coords 是顶点列表，顺序决定连线路径。起点和终点不会自动闭合（但浏览器渲染时视觉上会闭合），所以首尾点不必重复；但若漏掉一对坐标（奇数个值），整个 <area> 就失效。
常见错误现象：画了一个五边形，只写了 9 个数（比如 10,20,30,40,50,60,70,80,90），结果区域消失——因为 9 是奇数，最后一个 90 没有配对的 y 值，被丢弃，只剩前 8 个，变成四边形，可能还跑偏了。
- 写完
coords后数一下总个数，确保是偶数；用编辑器正则搜索,\s*统计逗号数，再加 1 应等于总数 - 顶点顺序建议顺时针或逆时针连续取，不要跳着点，否则可能生成自相交多边形，行为不可靠
- 复杂图形别手写：用在线工具（如 image-map.net）拖选导出，复制
coords字符串更稳妥
coords 在不同浏览器里表现一致吗
核心解析逻辑基本一致，但边界行为有细微差别。例如：当 coords 中某个值为负数或超出图片尺寸，Chrome 和 Firefox 都会将其裁剪到合法范围（如 x=-5 当作 0），但 Safari 对超大数值（如 y=1000000）偶尔会拒绝渲染该区域。
性能影响很小，coords 是静态字符串，浏览器内部转成简单几何判断，不涉及重绘或 JS 计算。但区域过多（上百个 <area>）可能拖慢鼠标移入检测，尤其在低配设备上。
- 测试时务必在 Safari、Chrome、Firefox 三端都点一遍，重点看边缘点是否响应
- 避免用
coords实现动态热区——它无法响应 resize 或滚动，要动就得重新生成整个<map> - 真正麻烦的不是怎么填，而是图片换了尺寸或裁剪后，所有
coords都得重算；留好原始标注源文件，比临时改数字靠谱得多
