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

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" />
  <circle cx="300" cy="150" r="30" fill="#e74c3c" data-id="room-203" />
</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() 做坐标转换

真正麻烦的从来不是“怎么让某块区域可点”，而是“点完之后，信息从哪来、提示往哪摆、缩放后还准不准”。这些细节不提前对齐，上线后调试两小时不如写代码五分钟。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载