circle形状的coords必须写三个数字，顺序为圆心横坐标、纵坐标、半径（像素），如“120,85,32”；少写、错序、含百分比均无效，且响应式缩放下需用SVG或JS动态适配。
circle形状的coords必须写三个数字，顺序不能错
HTML 图像映射中，<area shape="circle"> 的 coords 属性只接受且仅接受三个以逗号分隔的整数：圆心横坐标、圆心纵坐标、半径（单位：像素）。比如 coords="120,85,32" 表示圆心在图片左上角向右 120px、向下 85px 处，半径为 32px。
常见错误是少写一个数（如写成 "120,85"），或把半径写成百分比（如 "120,85,10%"）——HTML5 已废弃百分比支持，浏览器会直接忽略该 <area>。
调试时建议用开发者工具临时加 outline: 2px solid red 到 <img alt="HTML圆形区域映射怎么设置？半径参数调节方法" > 上，再用截图测量工具确认原始图中目标区域的实际像素半径。
半径调大 ≠ 点击区域变灵敏，反而容易误触相邻区域
半径是绝对像素值，不是相对比例。增大半径会让圆形热区物理覆盖更大范围，但若多个 <area> 靠得太近，半径一调大就可能重叠——这时点击行为由 DOM 中 <area> 的书写顺序决定：**先写的优先响应**，后写的被遮挡。
立即学习“前端免费学习笔记（深入）”；
实际调节半径时要注意：
- 先用最小可行半径（比如从 15px 起步）测试是否能准确覆盖目标对象（如按钮图标、小图标）
- 若目标本身有视觉边框或描边，半径可略大于视觉直径的一半，避免边缘点不响应
- 相邻热区间距小于两倍半径时，必须手动调整坐标位置，不能只靠缩放半径来“凑”
- 别用图像编辑器标出的“中心+半径”直接抄——要确认导出图分辨率没变，否则像素值已偏移
响应式页面里coords半径会失效，这不是 bug 是限制
原图缩放后，<img alt="HTML圆形区域映射怎么设置？半径参数调节方法" > 的渲染尺寸变了，但 <area coords="x,y,r"> 仍按原始图片像素计算，导致热区漂移。比如原图宽 800px，coords="400,300,20" 指向正中心小圆；缩放到 400px 宽后，那个热区仍在“原始 400px 处”，视觉上已偏右下。
此时强行调大半径只是掩耳盗铃，真正可用的方案只有：
- 换 SVG：
<svg></svg>内部用<circle cx="50%" cy="50%" r="5%"></circle>，天然响应式 - JS 动态计算：监听
resize，按img.naturalWidth / img.clientWidth比例重算所有coords - 弃用
<map></map>，改用绝对定位 +border-radius: 50%的<div> 叠在图上（需确保父容器 <code>position: relative）border-radius: 50%做不出图像映射里的圆形热区有人想绕过
<map></map>，直接给一个<div> 加 <code>border-radius: 50%当热区——这只能做出**视觉圆形按钮**，但它和原图无坐标绑定，无法实现“点击图中某块区域跳转”的语义化映射。而且它不支持alt、不被屏幕阅读器识别、不参与 tab 键导航顺序。如果真需要语义化 + 圆形 + 响应式，唯一推荐路径是：
- 用
<svg></svg>替代<img alt="HTML圆形区域映射怎么设置？半径参数调节方法" >，内嵌<circle></circle>并绑定xlink:href或href - 或保留
<img alt="HTML圆形区域映射怎么设置？半径参数调节方法" >，外层套<div style="max-width:90%">，内部用 <code><button style="position: absolute; width: 40px; height: 40px; border-radius: 50%; top: 100px; left: 150px;"></button>——但得手动维护每个按钮的top/left像素值，且必须加aria-label图像映射的
circle热区本质是坐标绑定，不是视觉裁剪；想用 CSS 形状替代，就等于放弃 HTML 语义和可访问性基础。
- 用
