直接用可实现多边形点击区域，但需确保coords为偶数个像素坐标、按顺时针/逆时针列顶点且不重复首点；热区不响应hover、无z-index、不随图片缩放自适应，须用js动态缩放coords或改用svg/polygon方案。
直接用 <area shape="poly"> 就能实现多边形可点击区域，但坐标准确性、响应式失效、事件不可见这三件事不处理好，点不中、点错、点到空白处跳转，都是常态。
coords 坐标怎么写才不会错
多边形的 coords 必须是偶数个整数，按顺时针或逆时针顺序列出所有顶点的 x,y，例如 coords="10,20,50,30,40,80" 表示三个点：(10,20) → (50,30) → (40,80)。浏览器会自动首尾闭合，所以不要重复第一个点（比如写成 "10,20,50,30,40,80,10,20" 反而可能触发解析异常）。
- 坐标原点是图片左上角
(0,0)，单位是像素 —— 图片缩放、CSSwidth改变、transform: scale()都会让这些坐标全部失效 - 绝不能手算：用在线工具（如 Image Map Generator）或 PS 的“路径选择工具”点选顶点导出坐标；UI 给的标注图必须确认是“原始尺寸截图”，不是设计稿缩放后的 PNG
- 多边形至少要 3 组坐标（6 个数字），少于 3 点会被浏览器忽略或退化为矩形热区
为什么鼠标 hover 不生效、点击区域比视觉大
<area> 本身不渲染任何 DOM 节点，也不支持 :hover 伪类，它只定义了“哪里能点”，但没提供“哪里看起来能点”。所以你看到的只是图片，而热区是透明叠加在图片上的几何区域。
- 想加 hover 效果，得靠
<img>的title属性（最简），或额外加一层带pointer-events: none的透明<canvas></canvas>或 SVG 覆盖层来绘制高亮 - 点击区域永远是原始像素坐标定义的多边形，和图片当前显示尺寸无关 —— 所以如果图片被 CSS 缩放到 50%，实际可点击区域只有视觉区域的四分之一（因为坐标没变，但图片变小了）
- 没有
z-index、不能加 class、无法用 JS 直接绑定mouseenter，只能监听<map></map>父容器的click并通过event.target判断是否为<area>
如何让 poly 区域适配不同屏幕尺寸
原生 <area> 没有响应式能力，coords 是死的像素值。硬要适配，只有两个现实路径：
- 用 JS 在页面加载/窗口 resize 时动态重算
coords：先获取<img>的naturalWidth/naturalHeight和当前offsetWidth/offsetHeight，按比例缩放所有坐标值，再写回area.coords - 彻底放弃
<map></map>，改用 SVG：<svg></svg>内嵌<polygon></polygon>，天然矢量缩放，支持:hover、fill、stroke、事件委托，且坐标可用百分比或 viewBox 自适应 - 如果只是按钮级需求（非图像映射），优先考虑
clip-path: polygon()+pointer-events: auto，热区与视觉完全一致，也支持响应式百分比坐标
真正麻烦的不是写对那串 coords，而是当设计师改了一次图片尺寸、前端加了一行 max-width: 100%、或者用户用手机横屏看的时候，整个热区就偏移了——这种问题没法靠调试器一眼看出，得用 DevTools 的「Toggle element screenshot」功能，把 <area> 对应的热区可视化出来，才能确认它到底落在哪儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
