coords属性单位及坐标格式全解析

HTML 中的 `coords` 属性仅支持像素（px）单位，严格基于图像原始尺寸定义绝对坐标，不兼容任何 CSS 单位或负值；其格式由 `shape` 属性决定——`rect` 对应“x1,y1,x2,y2”，`circle` 为“x,y,r”，`poly` 则是顺次排列的顶点坐标序列；常见失效并非语法错误，而是因 CSS 缩放未同步换算坐标、`usemap` 匹配失败、图像加载异常或交互属性缺失所致，精准调试需结合开发者工具验证 DOM 解析与坐标值一致性。

coords 属性的单位只有像素，没有其他单位

HTML 标签的 coords 属性值**全部以像素（px）为单位**，且是相对于图像左上角 "0,0" 的绝对坐标。它不支持 em、rem、%、vh 等任何 CSS 单位，也不接受负数坐标（超出图像边界的坐标会被浏览器忽略）。

常见误解是认为 coords 能随图像缩放自适应——实际不会。如果 用 CSS 缩放（如 width: 50%），而 的 coords 仍按原图尺寸写，热点区域就会错位。

• 必须按图像原始尺寸（natural width/height）测量和填写坐标
• 若图像被 CSS 缩放，需按比例换算 coords 值，或改用 SVG / JavaScript 方案替代
• 浏览器对超出图像边界坐标的处理是一致的：直接忽略，不报错也不警告

rect/circle/poly 三种 shape 对应的 coords 格式

coords 的具体格式完全取决于 shape 属性值，三者不能混用。写错格式会导致区域失效，但 HTML 验证器通常不报错，只能靠点击测试验证。

• shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角两组坐标，顺序不能颠倒（例如 "10,20,100,80"）
• shape="circle" → coords="x,y,r"：圆心 x、y 和半径 r，三者缺一不可（例如 "60,75,25"）
• shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."：按顶点顺时针或逆时针顺序列出所有点，无需首尾重复（例如 "20,30,90,25,85,88,15,92"）

注意：shape 不写默认为 "rect"，但此时 coords 仍必须是四数值格式，否则行为未定义。

用 Photoshop 获取 coords 坐标的实际操作要点

不用 Dreamweaver 也能准确定位，关键在信息面板和自由变换的配合使用，但容易因图层/缩放比例出错。

• 确保图像在 Photoshop 中 100% 显示（Ctrl+0），且信息面板单位设为“像素”（右键信息面板 → 单位与标尺 → 像素）
• 矩形区域：用选框工具拉出区域后，信息面板直接显示 X、Y、W、H；coords = "X,Y,X+W,Y+H"
• 圆形区域：用椭圆选框工具画正圆（Shift 拖拽），信息面板显示中心 X、Y 和半径 W/2；coords = "X,Y,W/2"
• 多边形区域：用钢笔工具描边后转选区，再在路径面板中导出坐标（需脚本辅助），手动记录顶点更可靠

切记：Photoshop 里看到的尺寸必须和 HTML 中 的 width、height 属性值一致，否则坐标会偏移。

coords 值被忽略的几个典型场景

明明写了 coords 却没响应点击，大概率不是语法错，而是这些隐性条件不满足：

• 缺少 usemap 属性，或其值（如 "#map1"）与 不匹配
• 没有 href 或 onclick，部分浏览器对无交互属性的区域不激活热区
• 图像加载失败（404）或跨域未配置 CORS，导致浏览器拒绝解析映射关系
• 多个 坐标重叠时，DOM 中靠前的元素会遮挡后面的，即使视觉上后者在上层

调试建议：用浏览器开发者工具检查 是否被正确解析（Elements 面板中展开看子节点），再手动在控制台执行 document.querySelector('area').coords 看返回值是否符合预期。

到这里，我们也就讲完了《coords属性单位及坐标格式全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！