circle形状的coords必须写三个数字，顺序为圆心横坐标、纵坐标、半径（像素），如“120,85,32”；少写、错序、含百分比均无效，且响应式缩放下需用SVG或JS动态适配。

circle形状的coords必须写三个数字，顺序不能错

HTML 图像映射中， 的 coords 属性只接受且仅接受三个以逗号分隔的整数：圆心横坐标、圆心纵坐标、半径（单位：像素）。比如 coords="120,85,32" 表示圆心在图片左上角向右 120px、向下 85px 处，半径为 32px。

常见错误是少写一个数（如写成 "120,85"），或把半径写成百分比（如 "120,85,10%"）——HTML5 已废弃百分比支持，浏览器会直接忽略该 。

调试时建议用开发者工具临时加 outline: 2px solid red 到 上，再用截图测量工具确认原始图中目标区域的实际像素半径。

半径调大 ≠ 点击区域变灵敏，反而容易误触相邻区域

半径是绝对像素值，不是相对比例。增大半径会让圆形热区物理覆盖更大范围，但若多个 靠得太近，半径一调大就可能重叠——这时点击行为由 DOM 中 的书写顺序决定：**先写的优先响应**，后写的被遮挡。

实际调节半径时要注意：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 先用最小可行半径（比如从 15px 起步）测试是否能准确覆盖目标对象（如按钮图标、小图标）
• 若目标本身有视觉边框或描边，半径可略大于视觉直径的一半，避免边缘点不响应
• 相邻热区间距小于两倍半径时，必须手动调整坐标位置，不能只靠缩放半径来“凑”
• 别用图像编辑器标出的“中心+半径”直接抄——要确认导出图分辨率没变，否则像素值已偏移

响应式页面里coords半径会失效，这不是 bug 是限制

原图缩放后， 的渲染尺寸变了，但 仍按原始图片像素计算，导致热区漂移。比如原图宽 800px，coords="400,300,20" 指向正中心小圆；缩放到 400px 宽后，那个热区仍在“原始 400px 处”，视觉上已偏右下。

此时强行调大半径只是掩耳盗铃，真正可用的方案只有：

• 换 SVG： 内部用 ，天然响应式
• JS 动态计算：监听 resize，按 img.naturalWidth / img.clientWidth 比例重算所有 coords
• 弃用 ，改用绝对定位 + border-radius: 50% 的
  叠在图上（需确保父容器 position: relative）

  border-radius: 50% 做不出图像映射里的圆形热区

  有人想绕过 ，直接给一个

  加 border-radius: 50% 当热区——这只能做出**视觉圆形按钮**，但它和原图无坐标绑定，无法实现“点击图中某块区域跳转”的语义化映射。而且它不支持 alt、不被屏幕阅读器识别、不参与 tab 键导航顺序。

  如果真需要语义化 + 圆形 + 响应式，唯一推荐路径是：

  • 用 替代 ，内嵌 并绑定 xlink:href 或 href
  • 或保留 ，外层套
    ，内部用 ——但得手动维护每个按钮的 top/left 像素值，且必须加 aria-label

    图像映射的 circle 热区本质是坐标绑定，不是视觉裁剪；想用 CSS 形状替代，就等于放弃 HTML 语义和可访问性基础。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！