coords必须为偶数个整数，两两配对成(x,y)像素坐标，如"10,20,50,30,40,80,15,75"，原点为图片左上角，需嵌入并由usemap关联，禁用响应式缩放以防失效。
poly 的 coords 怎么写才有效
多边形区域必须用 shape="poly"，coords 值是一串**偶数个整数**，按顺序两两配对为 x,y 坐标，比如 coords="10,20,50,30,40,80,15,75" 表示四个顶点：(10,20) → (50,30) → (40,80) → (15,75)。浏览器会自动首尾闭合，所以不用重复写第一个点。
常见错误是坐标个数为奇数、混入小数或逗号后多空格（如 "10, 20" 中的空格在部分旧浏览器里会解析失败），还有把图片缩放后直接复用原始 coords —— 这会导致热区漂移。
- 坐标原点永远是图片左上角
(0,0)，单位是像素，和 CSS 缩放无关 - 顶点顺序建议顺时针或逆时针连续，不要交叉，否则某些浏览器渲染异常
- 导出坐标前先确认图片尺寸没被 CMS 或响应式 CSS 意外拉伸
怎么快速取准 poly 坐标
别靠肉眼估：打开浏览器开发者工具，选中 <img alt="HTML怎么设置多边形图片可点击区域" > 元素，按住 Shift 拖选大致区域，然后在控制台运行 getBoundingClientRect() 看当前视口位置；更稳的方式是把图片另存为本地，在 Photoshop / GIMP 里开标尺，切到像素单位，逐点记录。
如果图形复杂，推荐用在线工具如 image-map.net 上传图片后手动描点，它会实时生成 <area> 标签代码，复制粘贴即可 —— 注意检查生成的 coords 是否含小数，手动删掉或四舍五入为整数。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 工具生成的坐标基于你上传图的原始尺寸，换图前务必核对 width/height 属性是否一致
- 移动端测试时，若图片用了
max-width: 100%，coords 会完全失效 —— 这是硬伤，不是 bug
area 标签必须嵌在 map 里，且 img 要正确关联
<area> 不能单独存在，必须包裹在 <map name="xxx"></map> 内；对应 <img alt="HTML怎么设置多边形图片可点击区域" > 必须带 usemap="#xxx"（注意开头的 #），name 和 usemap 值大小写必须严格一致。
示例片段：
<img src="floorplan.png" alt="楼层平面图" usemap="#planmap" style="max-width:90%" style="max-width:90%"> <map name="planmap"> <area shape="poly" coords="120,80,200,60,220,150,130,170" href="/room/a" alt="A区"> <area shape="poly" coords="300,90,410,70,420,160,310,180" href="/room/b" alt="B区"> </map>
-
alt属性不可省，否则屏幕阅读器无法识别，也影响 SEO - 多个
<area>可共用一个<map></map>，但每个href应指向不同资源 - Chrome/Firefox/Safari 都支持，但 IE11 及更早版本对 poly 的抗锯齿坐标解析略弱，顶点数别超 50
响应式场景下 poly 热区为什么失灵
根本原因：coords 是绝对像素值，而响应式图片的显示尺寸随容器变化，但 <area> 不会重算。没有原生方案能自动适配，强行加 JS 动态重写 coords 容易卡顿且精度难控。
实际可选路径只有两个：
- 放弃响应式图片，固定
width和height，用媒体查询切换不同尺寸图 + 对应 coords 组 - 改用 SVG 替代：
<svg></svg>内部<polygon></polygon>支持百分比坐标和 viewBox 缩放，热区真正跟随缩放
如果必须用 <map></map>，至少确保图片不设 width: 100% 或 max-width，否则 coords 彻底作废 —— 这点最容易被忽略，调试时先看 computed styles 里的实际渲染宽高是否等于原始尺寸。
