shape合法值仅rect、circle、poly、default（大小写敏感）；coords需匹配形状规范：circle为cx,cy,r；poly须首尾闭合；热区坐标基于原始图片尺寸，响应式需动态重算或固定宽高。
shape 属性合法值只有四个：rect、circle、poly、default
shape 不是枚举开放接口，浏览器只认这四个字符串（大小写敏感，推荐小写）。常见错误是填 triangle、ellipse 或 rectangle —— 前者完全无效，后者虽在部分旧浏览器中能 fallback 到 rect，但不保证兼容，必须用 rect。circ 是 circle 的别名，可识别但不推荐；polygon 同理，应统一用 poly。default 表示覆盖图像未被其他 area 覆盖的剩余区域，必须放在 map 内部所有其他 area 之后，否则会提前拦截点击。
circle 热区的 coords 格式和常见错位原因
circle 对应的 coords 必须且仅含三个数值：cx,cy,r，顺序不能颠倒。
-
cx和cy是圆心像素坐标（以图片左上角为原点） -
r是半径，单位像素，不能为负或小数（小数会被截断）
常见错误现象：
- 圆心点偏右下：实际是把
cx,cy当成了左上角，误填成矩形思维 - 点击无响应：图片用了 CSS 缩放（如
max-width: 100%），但coords仍是原始尺寸像素值，没做动态换算 - 半径过大导致热区溢出图片边界：浏览器不会裁剪，但超出部分无法触发
调试建议：
- 临时加 JS 辅助线，例如用
document.querySelector('area[shape="circle"]').getBoundingClientRect()查看实际渲染范围 - 在开发者工具中手动修改
coords值实时观察效果，比反复改 HTML 高效
poly 多边形热区必须闭合，且顶点顺序影响渲染
poly 的 coords 是一串逗号分隔的 x,y 对，首尾坐标必须完全相同，例如三角形要写成 "10,20,30,40,50,60,10,20"，漏掉最后的 10,20 会导致热区断裂或消失。
浏览器不会自动补全，也不会报错，只是静默忽略。
顶点顺序（顺时针/逆时针）不影响功能，但影响可维护性：
- 顺时针更符合直觉，多数导出工具默认如此
- 若用 MapEdit 或在线生成器，务必勾选“Close path”或“Auto-close”选项
- 手动编辑时，建议用代码格式化工具对齐坐标，避免漏逗号或错位
性能提醒：
- 单个
poly的 coords 数值超过 200 个（即约 100 个顶点）时，低端 Android WebView 可能出现点击延迟 - 不要为了“贴合轮廓”堆砌顶点，10–20 个关键锚点足够表达主体形状
响应式图片下热区失效的根本原因和应对方式
area 的 coords 始终基于原始图片像素尺寸，与 CSS 渲染尺寸无关。当图片被缩放时，热区坐标不会自适应。
这不是 bug，是规范行为。
解决路径只有两条：
- 固定图片尺寸：用
width和height属性（非 CSS）锁定像素宽高，确保coords与显示一致 - 动态重算坐标：引入轻量 JS 库如
rwd-image-maps，监听窗口 resize 并按比例缩放每个area的coords值
最容易被忽略的细节：
-
img元素若没设宽高属性，浏览器无法获知原始尺寸，JS 重算将失去基准 - 使用
object-fit: contain或cover时，热区需额外考虑裁剪逻辑，不能只靠等比缩放
多区域重叠时，DOM 顺序决定点击捕获优先级——排在后面的 area 会覆盖前面的，哪怕视觉上更小。这点和 CSS z-index 无关，是图像映射协议本身的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
