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 点击区域偏了

因为 的 coords 始终基于图像原始尺寸解析，和 CSS 渲染尺寸无关。当用 CSS 把一张 400×300 的图缩放到 200×150 显示时，你写的 coords="200,150,30" 实际会落在缩放后图片的右下角外侧。

解决办法只有两个：

• 用 JavaScript 动态重算 coords，监听图片加载和窗口变化，按缩放比例修正 x/y/r
• 改用 SVG 或 Canvas 实现可缩放的圆形热区（更现代、可控性强）

硬编码固定 coords 在响应式页面里基本不可靠。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

circle 和其他 shape 的兼容性差异

shape="circle" 在所有现代浏览器中都支持，包括 IE9+，但要注意：shape 属性本身是 HTML4 就有的，而部分老旧屏幕阅读器或键盘导航逻辑可能忽略 area 的 circle 区域，只识别 rect 或完整图片链接。

• 无障碍方面，建议为 加上 alt 属性（即使空字符串 alt=""），否则某些读屏工具报错
• 不要依赖 shape="circle" 做关键操作入口（比如“删除”按钮），优先用按钮 + 定位遮罩层替代
• poly 虽然灵活，但坐标维护成本高；circle 简洁，但仅适用于真圆场景，无法表达椭圆或带边框的点击反馈

替代方案：CSS clip-path 能不能做圆形点击区

不能直接替代。CSS clip-path: circle() 只控制**视觉裁剪**，元素本身的点击热区仍是矩形（整个 img 或父容器）。想实现视觉+交互都为圆形，得组合使用：

• 保留原 ，设 pointer-events: none
• 叠一层绝对定位的
  ，用 clip-path: circle() + pointer-events: auto
• 再通过 JS 绑定该
  的 click，并手动触发对应逻辑

  这比 复杂，但好处是完全脱离图片原始尺寸限制，也更容易加 hover 动效或过渡。

  真正要省事又可靠，就别强求用 area 做复杂交互；它的定位就是静态图像映射，圆只是其中一种基础形状而已。