HTML区域映射结合SVG实现交互-html教程-PHP中文网

area标签仅适用于img+map组合，不能用于svg内部；svg中应使用原生图形元素（如rect、circle）配合data属性和事件委托实现热区交互。

html区域映射结合svg实现交互

area热区在SVG里根本不起作用

area 标签只能配合 img 和 map 使用，它不是 SVG 元素，也不能嵌入 svg 标签内部。常见错误是把 area 写在 svg 里，或者试图用 usemap 指向 SVG 中的某个 g 或 rect —— 浏览器会直接忽略，控制台也不会报错，但点击毫无反应。

area 必须和 img 同级，且 usemap 值（如 #mymap）要与 map 的 name 属性逐字节一致（包括大小写、空格、符号）
SVG 内部不识别 area，也不支持 usemap 属性
若你已有拼接大图并想划热区，老老实实用 img + map；若你已用 SVG 做图，就别碰 area，改用原生 SVG 交互

SVG内部怎么实现等效热区

SVG 中每个图形元素（rect、circle、path、g）天然可点击、可监听事件、可绑定数据。这才是现代做法的起点。

给图形加 cursor: pointer CSS，视觉上提示可点
直接在 rect 上写 data-href="/product/1" 或 data-id="item-01"，比靠坐标猜索引安全得多
用事件委托：给整个 svg 绑 click，再用 event.target 判断是否带有效 data- 属性
避免对每个图形单独绑定事件（尤其上百个散点时），性能差且难维护

<svg viewbox="0 0 800 600"><rect x="50" y="80" width="120" height="90" fill="#4a90e2" data-href="/floor/1"></rect><circle cx="300" cy="150" r="30" fill="#e74c3c" data-id="room-203"></circle></svg>

响应式下热区位置不准怎么办

area 的 coords 是绝对像素值，图片一缩放就偏移；SVG 的 viewBox + preserveAspectRatio 天然适配缩放，但前提是坐标系逻辑清晰。

确保 SVG 使用 viewBox（如 viewBox="0 0 720 720"），不要只靠 width/height 控制尺寸
所有图形坐标（x、y、cx、cy）都基于 viewBox 定义的逻辑坐标系，而非屏幕像素
如果必须兼容老式拼接图 + map，就得用 JS 在 resize 和 load 后重算 area.coords —— 但更推荐直接迁移到 SVG 方案，一劳永逸

提示框和跳转逻辑怎么统一处理

SVG 图形本身不支持 title 的移动端长按、无障碍读取，也不支持富文本提示。真实项目里得用 HTML div 做 tooltip，并由 SVG 元素触发。

在 body 底部放一个 <div id="tooltip"></div>，CSS 设为 position: absolute + pointer-events: none
监听 svg 的 mousemove，用 event.target.getBoundingClientRect() 获取位置，动态设 tooltip.style.left/top
跳转逻辑写在 click 回调里：const href = target.getAttribute('data-href'); if (href) location.href = href;
注意：如果 SVG 被包裹在 transform 容器或 overflow: hidden 区域里，getBoundingClientRect() 返回的位置可能不准，此时应改用 getScreenCTM() + inverse() 做坐标转换