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