所有 coords 值必须基于图片的 naturalWidth 和 naturalHeight（原始像素尺寸），而非渲染宽高或设计稿缩放比例；标注图需确认实际分辨率，拼接图坐标须以整图左上角为原点，禁用百分比导出，推荐 image-map.net、PS/Figma 插件及 ismap 点击取点法；coords 格式须严格合规，响应式下需 JS 动态重算缩放比或改用 SVG。
用原始图尺寸取点，别信设计稿缩放后的坐标
所有 coords 值必须基于图片的 naturalWidth 和 naturalHeight（即原始像素尺寸），不是浏览器渲染后宽高，也不是 Figma / Sketch 里缩放 50% 的画布尺寸。UI 给你一张「标注图」，先右键另存为，再用图片查看器打开确认实际分辨率；如果标注图是 1920×1080，但原始图是 3840×2160，那所有坐标得 ×2 才准。
常见错误现象：在 Chrome 开发者工具里给 border: 1px solid red，发现热区明显偏移——八成是坐标没按原始图算。
- 临时验证法：把图片
width和height属性强制设为原始值（如width="3840" height="2160"），再测点，对齐了就说明坐标源没错 - 拼接图场景：各子图坐标必须从整张大图左上角 (0,0) 起算，不能以子图自身为原点
- 导出坐标时禁用“相对坐标”或“百分比”选项——HTML
@#@#@#@#@#@#@#@#@#@0 —— 上传原始图后拖选区域，自动输出标准标签，shape和coords一键复制，支持 rect/circle/poly -
PS/Figma 插件：Photoshop 中用「路径选择工具」勾勒多边形 → 右键「复制路径」→ 粘贴到文本编辑器，用正则
(\d+)\s*,\s*(\d+)提取坐标对，再拼成"x1,y1,x2,y2,..." -
浏览器原生法：给
，点击图片任意位置，URL 地址栏末尾会显示?x,y—— 这是最接近真实点击坐标的测量方式，适合快速标定单点
coords 格式校验要点（填错一位就失效）
coords 不是“数字列表”，而是有严格语法的字符串。浏览器不报错，只静默忽略错误格式的 ：
-
shape="rect"→ 必须且仅能含 4 个整数："x1,y1,x2,y2"，且x1 且y1 （否则热区退化为点或反向矩形） -
shape="circle"→ 3 个整数："cx,cy,r"，r不能为 0 或小数（"100,80,30.5"会被 Safari 直接跳过） -
shape="poly"→ 坐标对总数必须为偶数，顶点按顺序列出，首尾不自动闭合；"10,20,50,30,40,80"✅，"10,20,50,30,40,80,10,20"❌（可能触发解析异常） - 所有值之间只能用英文逗号分隔，禁止空格、中文逗号、换行符
移动端和响应式下为什么总点不准
因为 的坐标系是静态像素，和图片当前 CSS 渲染尺寸完全脱钩。哪怕你用 max-width: 100% + height: auto，只要图片被缩放，热区物理位置就固定在原始像素坐标上，视觉点击目标已位移。
这不是 bug，是规范限制。所以：
- 不要指望纯 HTML
在响应式页面里“自动适配” - 若必须用，至少在
window.onload和window.resize时用 JS 重算缩放比：scale = img.offsetWidth / img.naturalWidth，再遍历所有area.coords乘以该值 - 真正省心的方案是换 SVG：
，天然缩放、支持 hover、无障碍友好
最常被忽略的一点：即使你 JS 重算了 coords，也要确保 img 的 naturalWidth 已加载完成——onload 事件比 DOMContentLoaded 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
