coords属性不参与计算，仅是手动输入的像素坐标，填错或格式不符会导致热区失效且无报错；其值须严格匹配shape类型规则：rect为x1,y1,x2,y2（左上与右下），circle为cx,cy,r（r为正整数），poly为x1,y1,x2,y2,…（偶数个顶点）；所有坐标基于图片原始尺寸（naturalWidth/Height），非CSS渲染尺寸；常见“点不中”源于尺寸链断裂，如CSS缩放未同步缩放coords、@2x坐标未除dpr、透明区域误点、naturalWidth读取过早；响应式需JS动态重算：监听onload与ResizeObserver，用natural尺寸与offset尺寸算缩放比，逐坐标映射；当需适配高清屏、复杂形状、CSS断点或已有SVG工作流时，应改用SVG替代image map。
coords 属性本身不参与任何计算，它只是你手动填进去的一组像素坐标；填错或格式不对，热区就点不中，而且浏览器完全不报错。
coords 怎么写才不会错位
coords 的值必须严格匹配 shape 类型的坐标规则，浏览器只按字符串顺序解析数字，多一位、少一位、顺序反了，都会导致热点偏移或失效：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角和右下角坐标，不是宽高；x1 且y1 才能正常渲染 -
shape="circle"→coords="cx,cy,r"：圆心 x、y 和半径，r 必须为正整数，不能是小数或负数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点必须成对出现（偶数个数值），至少 3 对；首尾不需重复，浏览器自动闭合 - 所有坐标单位都是像素，基准是图片原始尺寸（
img.naturalWidth/naturalHeight），不是 CSS 渲染后的大小
为什么 coords 填对了还是点不中
常见“点不中”不是代码写错，而是图像尺寸链断裂造成的隐性偏移：
- CSS 缩放了
width: 50%），但coords还按原始图尺寸写——必须按比例缩放坐标值 - 用了 @2x 设计稿，直接把标注里的坐标（如
"200,100,400,300"）填进 HTML，忘了除以设备像素比（dpr=2 → 实际应填"100,50,200,150"） - 图片有透明背景，你在设计工具里点了透明区域的坐标，area 依然响应——
coords只认位置，不读像素颜色 -
width/height属性，又没等onload就执行 JS 读取naturalWidth，可能拿到 0 或错误值
如何让 coords 随窗口缩放自动适配
HTML 原生不支持百分比 coords，硬编码坐标在响应式页面中必然失效；必须用 JS 动态重算：
- 监听
img.onload和ResizeObserver（比window.onresize更稳），确保图片 layout 完成后再读尺寸 - 用
img.naturalWidth/naturalHeight得原始尺寸，img.offsetWidth/offsetHeight得当前渲染尺寸 - 逐个解析
area.coords字符串：split(',').map(Number)→ 按奇偶索引分别乘scaleX/scaleY→join(',')赋回 - 避免用
window.location.reload()强刷页面来“解决”缩放问题——这会打断用户操作，且无法处理局部重绘
什么时候该放弃 coords 改用 SVG
当你遇到这些情况，说明 coords 已经不是最优解：
- 需要支持高清屏（dpr > 1）、旋转、非均匀缩放
- 热区形状复杂（如文字轮廓、曲线边界），靠
poly描点成本太高且难维护 - 要结合 CSS 媒体查询做断点适配，或用
viewBox实现无损缩放 - 团队已有 SVG 工作流（Figma 导出、SVGR 处理），而 image map 还得人工拖点、校验、换算
真正麻烦的不是算坐标，而是图像原始尺寸、CSS 渲染尺寸、设备像素比、导出流程之间存在多层隐含依赖——改一张图的 width 属性，所有 coords 都可能要重调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
