area标签的shape="circle"需配合coords="x,y,r"使用，x、y为圆心坐标（相对于图片左上角），r为半径，三者均为无单位纯数字；CSS缩放图片时coords仍按原始尺寸计算，否则热点偏移。
area 标签的 shape="circle" 怎么写坐标
直接写 shape="circle" 不会生效，必须配对正确的 coords 值，格式是 coords="x,y,r"：圆心横坐标、纵坐标、半径（像素单位，相对于图片左上角原点）。浏览器按这个三元组画圆，点击区域才真正生效。
常见错误是把 coords 写成两个点（比如模仿 rect 的写法），或漏掉半径、用百分比、带单位（如 "100,100,30px"）——这些都会导致区域失效，点击无响应。
-
coords必须是纯数字，用英文逗号分隔，不能有空格 - 圆心坐标
x和y是从图片左上角（0,0）开始算的，不是从页面或容器 - 如果图片被 CSS 缩放（
width/height修改），coords仍需按原始图片尺寸计算，否则热点错位
为什么图片缩放后 circle 点击区域偏了
因为 <area> 的 coords 始终基于图像原始尺寸解析，和 CSS 渲染尺寸无关。当用 CSS 把一张 400×300 的图缩放到 200×150 显示时，你写的 coords="200,150,30" 实际会落在缩放后图片的右下角外侧。
解决办法只有两个：
- 用 JavaScript 动态重算
coords，监听图片加载和窗口变化，按缩放比例修正 x/y/r - 改用 SVG 或 Canvas 实现可缩放的圆形热区（更现代、可控性强）
硬编码固定 coords 在响应式页面里基本不可靠。
circle 和其他 shape 的兼容性差异
shape="circle" 在所有现代浏览器中都支持，包括 IE9+，但要注意：shape 属性本身是 HTML4 就有的，而部分老旧屏幕阅读器或键盘导航逻辑可能忽略 area 的 circle 区域，只识别 rect 或完整图片链接。
- 无障碍方面，建议为
<area>加上alt属性（即使空字符串alt=""），否则某些读屏工具报错 - 不要依赖
shape="circle"做关键操作入口（比如“删除”按钮），优先用按钮 + 定位遮罩层替代 -
poly虽然灵活，但坐标维护成本高；circle简洁，但仅适用于真圆场景，无法表达椭圆或带边框的点击反馈
替代方案：CSS clip-path 能不能做圆形点击区
不能直接替代。CSS clip-path: circle() 只控制**视觉裁剪**，元素本身的点击热区仍是矩形（整个 img 或父容器）。想实现视觉+交互都为圆形，得组合使用：
- 保留原
<img alt="如何定义圆形点击区域_AREA标签SHAPE属性设置为CIRCLE" >，设pointer-events: none - 叠一层绝对定位的
<div>，用 <code>clip-path: circle()+pointer-events: auto - 再通过 JS 绑定该
<div> 的 click，并手动触发对应逻辑 <p>这比 <code><area>复杂，但好处是完全脱离图片原始尺寸限制，也更容易加 hover 动效或过渡。真正要省事又可靠，就别强求用
area做复杂交互；它的定位就是静态图像映射，圆只是其中一种基础形状而已。
