<area>标签仅在<map>+<img>中有效，不支持SVG；SVG热区须用<path>等原生元素配合pointer-events实现，坐标需按viewBox缩放转换。
area 标签根本不能和 SVG 一起用
直接说结论：<area> 只在 <map> + <img> 场景下有效，它不支持 SVG 作为宿主容器，也不识别 SVG 的坐标系、变换或路径。试图把 <area shape="poly"> 塞进 <svg> 里，浏览器会完全忽略——不是报错，是静默失效。
常见错误现象包括：点击无响应、开发者工具里 <area> 显示为“not rendered”、热区位置严重偏移（尤其 SVG 有 viewBox 或缩放时）。
根本原因在于：<area> 是为位图图像设计的，依赖绝对像素坐标和固定宽高比；SVG 是向量图形，坐标系可缩放、可嵌套、可 transform，两者底层机制不兼容。
SVG 内部热区必须用 <path> + pointer-events
要在 SVG 里实现复杂热区（比如不规则多边形、带曲线的区域、镂空形状），唯一可靠方式是用 SVG 原生元素（<path>、<polygon>、<circle> 等）绘制图形，再通过 CSS 控制交互行为。
立即学习“前端免费学习笔记（深入）”；
关键点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
pointer-events: visiblePainted（默认值）要求图形有填充或描边才响应点击；若只想要“形状轮廓”响应，需显式设fill="none"+stroke="currentColor"+stroke-width - 若热区需透明不可见，用
fill="none"+pointer-events: all，这样即使无视觉表现也能捕获事件 - 避免对
<g>设置pointer-events后子元素继承失效——某些旧版 Safari 对<g>的事件继承处理异常，建议直接挂到具体图形元素上
示例（一个贝塞尔曲线围成的热区）：
<path d="M100,200 C150,100 250,100 300,200 L280,240 Q200,260 120,240 Z"
fill="none"
pointer-events="all"
onclick="handleClick('region-a')"></path>
从 image map 坐标迁移到 SVG 路径要重算坐标
如果你原有 <area coords="x1,y1,x2,y2,... ">，不能直接把数字塞进 <polygon points="...">——因为：
-
<area>坐标基于图片原始像素尺寸（如 width="800" height="600"），而 SVG 的viewBox可能是"0 0 400 300"，等比缩放 2 倍 - 若图片被 CSS 拉伸（
width:100%; height:auto），实际渲染尺寸和原始坐标彻底脱钩 - SVG 支持
transform，<g transform="scale(1.5) translate(20,10)">会让所有子坐标按规则重映射
正确做法：以 SVG 的 viewBox 为基准，把原 coords 按比例缩放后写入 points 或 d 属性。例如原图 800×600，<area coords="0,0,800,600">，对应 viewBox="0 0 400 300" 的 SVG，就该写 <rect x="0" y="0" width="400" height="300">。
需要动态热区时别手写 path，用 getBBox() 和 isPointInPath()
纯静态热区用 <path> 没问题，但若热区随数据变化（比如地图上实时高亮某省）、或需精确判断鼠标是否落在某条曲线上，就得靠 JS API：
-
element.getBBox()返回当前 SVG 元素在本地坐标系中的包围盒，可用于快速粗筛 -
svg.checkIntersection(path, rect)已废弃，不要用；应改用path.isPointInPath(x, y)（注意：需先调用svg.getScreenCTM()把屏幕坐标转为 SVG 本地坐标） - 性能敏感场景（如拖拽中高频检测），避免每次调用
getScreenCTM()——缓存 CTM 矩阵，仅当 SVG 尺寸或 transform 变化时更新
容易被忽略的一点：isPointInPath() 默认检测填充区域，若热区是细线（stroke-only），得配合 isPointInStroke()，且后者在部分安卓 WebView 中支持不佳，需降级 fallback。
