coords属性是手动填写的原始像素坐标，非计算所得；填错、顺序反、未适配缩放或dpr，热区即失效且无报错；必须严格匹配shape类型（rect/circle/poly）及natural尺寸规则。
coords 属性不是计算出来的，而是你按图片原始像素尺寸手动填的一组数字；填错、顺序反、单位混用、缩放没适配，热区就点不中，而且浏览器完全不报错。
coords 值必须严格匹配 shape 类型和 natural 尺寸
浏览器只按字符串拆分、转数字、再按 shape 规则解释坐标，不校验合法性。错一位，整个区域偏移或失效。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，不是宽高；要求x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心 x、y 和半径，r必须是正整数（不能是10.5或负数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3"：至少三对坐标（6 个数字），首尾不需重复，浏览器自动闭合 - 所有坐标基准是
img.naturalWidth/img.naturalHeight，不是 CSS 渲染后尺寸，也不是设计稿标注值（比如 @2x 标注的200,100,400,300要先除以window.devicePixelRatio）
为什么 coords 填对了还是点不中
常见问题几乎都来自“尺寸链断裂”，而非语法错误。
- CSS 缩放了
<img>（如width: 50%），但coords还按原始图写 → 需按offsetWidth / naturalWidth比例重算每个坐标 - 图片未设
width/height属性，JS 在onload前就读naturalWidth→ 返回0，导致缩放比算错 - 点了 PNG 透明区域 ——
coords只认位置，不读像素颜色，点中就触发，哪怕底下是透明的 -
usemap="#floor-map"和<map name="floor-map">大小写或#缺失 → 热区直接被忽略，控制台零提示
响应式页面里 coords 怎么动态适配
HTML 原生不支持百分比 coords，硬编码在 max-width: 100% 页面中必然失效；唯一可靠解法是 JS 动态重算。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 监听
img.onload和ResizeObserver（比window.onresize更准，能捕获 CSS 容器变化） - 读取
img.naturalWidth和img.offsetWidth，算出横向缩放比scaleX = offsetWidth / naturalWidth（同理scaleY） - 对每个
<area>的coords字符串做split(',').map(Number)，再按奇偶索引分别乘scaleX和scaleY，最后join(',')写回 - 避免高频触发：加
requestAnimationFrame节流，或用debounce包裹重算逻辑
什么时候该放弃 coords 改用 SVG
当出现以下任一情况，coords 就不再是省事方案，而是埋坑：
- 需要适配高清屏（dpr > 1）且设计稿坐标未标准化
- 热区形状复杂（如带曲线、文字轮廓、镂空区域）
- 页面有多个断点，CSS 缩放规则不统一
- 团队已有 SVG 工作流（Figma 导出 SVG → 直接用
<path>描边）
SVG 的 <image> + <polygon> 天然响应缩放，坐标系与视口一致，不用手动换算，也没有 usemap 关联失败风险——真正麻烦的从来不是怎么写 coords，而是维护它和图像尺寸、导出流程、设备像素比之间的隐性耦合。
