最直接方案是+，需严格匹配usemap="#name"与name="name"，coords基于原始尺寸；响应式推荐SVG；高交互用Canvas；开关类场景首选包裹checkbox。
用 <map></map> + <area shape="poly"> 定义不规则热区最直接
原始图片上画任意多边形区域，靠 coords 列出所有顶点坐标即可。这是 HTML 原生支持、无需 JS、语义明确的方案。
关键约束有三个：
-
<img alt="HTML怎么自定义不规则可点击区域" >的usemap属性必须带#，比如usemap="#region-map" -
<map></map>的name属性**不能带**#，必须严格写成name="region-map" -
<area shape="poly">的coords是一串“x,y”交替的像素值，如coords="10,20,30,15,45,35,25,50"，顺序闭合，且全部基于图片原始尺寸（不是 CSS 缩放后的尺寸）
一旦图片用了 width: 100% 或 max-width，coords 就会偏移——这不是 bug，是规范行为。
响应式页面里 <map></map> 热区失效？换 SVG 是更稳的选择
SVG 把图片当背景，用 <path></path> 或 <polygon></polygon> 定义可点击区域，天然随容器缩放，坐标自动适配。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 把原图作为
<image></image>嵌入 SVG，再叠一层<polygon points="..."></polygon> - 给
<polygon></polygon>加cursor: pointer和fill="none"（避免遮挡图片），再绑定click事件 - 如果要用 href 跳转，直接在
<a></a>标签里包住<polygon></polygon>，不用 JS
缺点是需手动导出路径点，但比 JS 动态重算 coords 更可靠，也比维护多套 <map></map> 更轻量。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
需要高亮/变色/拖拽反馈？绕不开 Canvas + JS 坐标判断
当点击区域要实时响应鼠标位置、填充颜色、或和动画联动时，<map></map> 和 SVG 都不够灵活，得用 <canvas></canvas> 捕获点击并做几何计算。
核心逻辑就一行：
const dist = Math.hypot(x - clickX, y - clickY); // 判断点到圆心距离
但对不规则区域，得换成「点是否在多边形内」算法（如射线法）。常见坑：
- Canvas 坐标系和 DOM 坐标系不一致：必须用
getBoundingClientRect()转换clientX/Y到 canvas 内部坐标 - 缩放后未同步调整 canvas 的
width/height属性（仅改 CSS 尺寸会导致坐标失真） - 没处理
touchstart，移动端点不中——iOS Safari 对非<button></button>元素的 touch 事件有拦截机制
label 包裹 checkbox 是唯一零 JS、无障碍友好的不规则热区方案
如果你的“不规则区域”本质是开关控制（比如地图上的某个省、图标上的某块区域），<label></label> 是最被低估的解法。
结构必须严格：
-
<label><input type="checkbox">文字</label>，<input>是<label></label>的**直接子节点** -
<input>不能设display: none或visibility: hidden；可用position: absolute; opacity: 0;移出视口 - CSS 给
<label></label>设任意形状（clip-path、border-radius、mask-image都行），热区自动跟随视觉区域
它天然支持键盘聚焦、屏幕阅读器朗读、空格/回车触发，且点击区域就是 label 的 layout box——你画多大，就能点多大。
真正难的从来不是怎么画形状，而是热区是否在各种缩放、字体加载、动态内容插入后依然精准。别在 coords 上反复调参，先确认场景是否真的需要“不规则”，还是只是没用对 <label></label> 或 SVG。
