area标签不能直接用于svg图像，仅支持与img和map配合；svg热区须用rect、circle、path等原生元素实现，并依赖viewbox实现响应式缩放。
area 标签不能直接用于 SVG 图像
HTML 的 <area> 只能配合 <img> 和 <map></map> 使用，它对 SVG 完全无效——哪怕你把 SVG 当作 src 放进 <img>，<area> 依然无法绑定到 SVG 内部结构。这不是兼容性问题，是规范限制：<area> 的坐标系只认位图的 naturalWidth/naturalHeight，而 SVG 是向量容器，没有这个概念。
SVG 中实现热区的正确方式：用 <rect></rect>、<circle></circle>、<path></path> 替代 <area>
在 SVG 里模拟 <area> 行为，本质是把每个热点区域写成一个可交互的 SVG 元素，并手动赋予链接语义：
-
<rect x="10%" y="20%" width="15%" height="12%" href="https://example.com" target="_blank"></rect>—— 矩形区域，支持百分比坐标 -
<circle cx="30%" cy="40%" r="5%" href="https://example.com"></circle>—— 圆形区域，r也支持百分比 -
<path d="M10,20 L30,10 L40,30 Z" href="https://example.com"></path>—— 多边形，坐标可保持原始像素值，但更推荐转为 viewBox 单位
关键点：href 属性在 SVG 2 中已原生支持（Chrome/Firefox/Edge 均可用），无需 JS；若需兼容旧版，加 onclick="location.href='...'" 或用 <a></a> 包裹。
必须设置 viewBox，否则坐标会错乱
很多人把 SVG 写成 <svg width="100%"></svg> 就完事，结果热区位置漂移——这是因为没设 viewBox。SVG 响应式缩放依赖 viewBox 定义的逻辑坐标系：
-
<svg viewbox="0 0 800 600" width="100%" height="auto"></svg>——800×600必须等于原图的自然尺寸（如 Photoshop 导出尺寸） - 所有子元素坐标（
x,y,cx,cy,d中的数字）都按这个 viewBox 单位解释，缩放时自动重映射 - 漏掉
viewBox或填错数值，会导致10%不再是真实宽度的 10%，而是按浏览器默认 300×150 视口计算
从 <area> coords 迁移到 SVG 的坐标换算很直接
如果你已有 <area shape="rect" coords="120,80,240,160">，且原图是 800×600，换算就是除法：
- 矩形：
x = 120 / 800 * 100 + "%"→"15%"，y = 80 / 600 * 100 + "%"→"13.33%"，宽高同理 - 圆形：
cx = 200 / 800 * 100 + "%"，cy = 100 / 600 * 100 + "%"，r = 30 / Math.min(800,600) * 100 + "%"（用 min 防止椭圆） - 多边形：对
coords字符串每两个数一组，分别除以宽、高再转百分比
别指望 PS 插件或在线工具一键导出 SVG 热区——它们多数不处理 viewBox 对齐，最终还得人工校验第一组坐标是否落在预期位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
