poly热区不偏移需手动重复首顶点闭合，如“10,20,50,10,30,60,10,20”；坐标必须基于图片naturalWidth/Height的绝对像素值，按顺时针或逆时针顺序填写，且usemap与map name严格匹配。
area 的 shape="poly" 坐标怎么填才不偏移
多边形热区错位，八成是 coords 顺序或数值错了。poly 不自动闭合，必须手动把首点重复写在末尾，否则浏览器渲染可能截断或连错线。比如一个三角形顶点是 (10,20)、(50,10)、(30,60)，coords 得写成 "10,20,50,10,30,60,10,20"。
常见错误：
- 用设计稿“居中坐标”直接抄——必须换算成以图片左上角为原点的绝对像素值
- 图片加了
width/height或 CSS 缩放后，还按缩放后尺寸量坐标 - 顶点顺序不是顺时针/逆时针绕一圈，而是跳着写，导致区域识别失败（尤其 Safari 对 poly 解析更严格）
调试建议：临时给 <img alt="HTML复杂形状区域映射点击实现方法" > 加 border: 1px solid red，再用浏览器开发者工具「截图选区」比对原始图上量出的像素点是否一致。
响应式下 coords 失效，为什么 JS 重算还经常不准
根本原因不是 JS 写得不对，而是缩放比没取对。浏览器计算 coords 时只认图片的 naturalWidth/naturalHeight，和当前渲染宽高无关。如果用了 object-fit: contain 或 background-size，JS 里不能只看 offsetWidth，得先确认图片是否被拉伸、裁剪或保持比例。
立即学习“前端免费学习笔记（深入）”；
安全做法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 加载完图片后立刻读取
img.naturalWidth和img.naturalHeight，存为基准尺寸 - 用
getBoundingClientRect()获取当前显示宽高，再按容器约束逻辑算出实际缩放比（比如contain下取Math.min(wRatio, hRatio)） - 遍历所有
<area>，对coords字符串做split(',').map(Number)，奇数位×scaleX，偶数位×scaleY，再join(',')赋回去
漏掉 img.addEventListener('load', ...) 或没监听 resize 后的防抖，都会导致首次加载或旋转屏幕后热区漂移。
area 点击没反应？先查这三个硬性匹配点
<area> 是个“隐形协议”，缺一不可，浏览器不会报错，但失效就是彻底静默。
-
<img usemap alt="HTML复杂形状区域映射点击实现方法" >的值必须带#前缀，且大小写完全匹配<map name></map>——usemap="#MyMap"和<map name="mymap"></map>就是失败 -
<area>必须嵌套在<map></map>内部，不能放在<picture></picture>、<figure></figure>或任意 div 里 - 每个
<area>必须有alt属性，否则屏幕阅读器跳过，部分浏览器（如旧版 Edge）也直接禁用点击
检查方法：打开开发者工具 Elements 面板，展开 <map></map>，确认里面真有 <area> 节点；再右键图片 → “检查元素”，确认 usemap 值和 map 的 name 对得上。
复杂形状不如直接换 SVG，什么情况下该切
当热区超过 5 个、含曲线或镂空、还要支持 hover 动画、键盘 Tab 焦点、或需适配从桌面到折叠屏时，<map></map> 就是自找麻烦。SVG 天然 viewBox 响应式，坐标自动缩放，<path></path> 支持贝塞尔曲线，focusable="true" + aria-label 开箱即用。
迁移要点：
- 把原图转成 SVG 的
<image href="..."></image>，再叠<g></g>包裹多个<path></path>或<circle></circle> - 所有热区统一加
tabindex="0"和role="button"，避免仅靠onclick丢焦点 - 事件委托挂到
<svg></svg>上，用e.target.matches('path[data-region]')判断区域，比反复查area更稳
真正容易被忽略的是：SVG 容器必须设明确宽高（哪怕用 aspect-ratio），否则在 flex/grid 布局里可能塌陷，导致 viewBox 缩放失常。
