area标签只支持位图，不适用于svg矢量图；其coords基于图片原始像素坐标，无法适配svg的矢量坐标系、缩放或响应式布局，嵌入svg内会被忽略，正确方案是改用svg原生元素（如）绑定事件。
area标签只支持位图，不适用于SVG矢量图
area 标签设计初衷就是配合 <img> 加载的位图（PNG/JPG/GIF）使用。它和 <map></map> 构成一套基于像素坐标的热区系统，所有 coords 值都绑定在图片的 naturalWidth/naturalHeight 上。SVG 是独立的 XML 文档结构，area 无法嵌入其中，也不能响应其内部坐标系。
常见误操作包括：把 <svg></svg> 当作 <img src="xxx.svg"> 使用后，仍试图加 usemap；或把 <area> 写在 <svg></svg> 内部——浏览器会直接忽略，控制台无报错，但点击完全无效。
如果你用的是内联 SVG（即直接写 <svg>...</svg>），正确做法是改用 <rect></rect>、<circle></circle>、<polygon></polygon> 等原生 SVG 元素，并绑定 click 或 href（需加 xlink:href 或现代 href 属性）。
位图热区坐标必须按原始尺寸书写，缩放即失效
位图下 area 的 coords 是硬编码像素值，例如 coords="100,50,200,150" 指的是原图中横纵各 100px 的矩形区域。一旦该图被 CSS 缩放（如 width: 50% 或 max-width: 100%），热区物理位置就漂移了——这不是 bug，是规范行为。
容易踩的坑：
- 用设计稿标注的“居中坐标”直接填进
coords，没换算回原始图尺寸 - 导出坐标时保留了空格或换行，比如
coords="100 , 50 , 200 , 150"，部分浏览器解析失败 - 以为
shape="poly"会自动闭合，漏写首尾重复点，导致热区不封闭（如三角形只连两条边）
SVG 热区天然适配缩放，无需 JS 重算坐标
SVG 的 viewBox 和百分比单位让热区坐标与渲染尺寸解耦。例如 <rect x="10%" y="20%" width="30%" height="15%"></rect> 在任何容器尺寸下都保持相对位置。这正是它替代 map+area 的核心优势。
实操建议：
- 把位图热区需求转为 SVG 时，不要逐像素描点，而是用
path或组合基础图形表达语义区域（如“左侧机箱”“右侧屏幕”） - 需要键盘导航？给 SVG 元素加
tabindex="0"+role="link"+aria-label，比补全area的无障碍更可靠 - 若必须兼容旧项目且不能换 SVG，JS 动态重算唯一可行路径：
img.naturalWidth / img.offsetWidth得横向缩放比，再遍历所有area的coords字符串做数值替换
为什么你看到的“SVG 中用了 area”其实是假象
有些工具导出的 “SVG 热区” 实际是把 SVG 当作 <img> 载入，再在外层套 <map></map>+<area> —— 这本质上仍是位图方案，热区照样随缩放漂移，且丢失 SVG 的矢量特性（如高清缩放、CSS 控制 fill/stroke）。
真正有效的混合方案只有两种：
- 内联 SVG + 原生 SVG 元素 + JS 事件（推荐）
- 位图
<img>+<map></map>+ 严格原始尺寸 + 禁用 CSS 缩放（仅限固定布局）
坐标系统不统一这件事，从一开始就没法绕开。要么接受像素锁定，要么切换坐标系——没有中间态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
