clip-path裁剪后点击区域仍是矩形，需用pointer-events:none配合SVG path实现精确热区；SVG因按路径几何轮廓hit-testing而更可靠，且必须用viewBox和归一化坐标确保适配。
clip-path 裁剪后点击区域还是矩形？必须关 pointer-events
视觉上用 clip-path: polygon() 剪出三角形或五角星，但鼠标悬停和点击仍会响应整个原始盒子——这是浏览器规范行为，不是 bug。直接加 overflow: hidden 或指望 CSS 自动同步热区，完全无效。
正确做法是两步断开：给裁剪容器设 pointer-events: none，再叠一个同形状的交互层。否则你在 DevTools 里看到“裁掉了”，实际测试时边缘空白区依然能点中。
- 别对
<button>直接加clip-path后就认为它“变成三角形按钮”了——Safari 和部分安卓 WebView 会在裁剪边界产生点击盲区 - 如果用
<div>模拟按钮，必须加role="button" tabindex="0"，否则键盘用户无法聚焦 -
pointer-events: polygon是已废弃草案，所有浏览器都不支持，写上去等于没写
SVG 为什么比 CSS clip-path 更可靠？因为 hit-testing 看的是路径本身
SVG 的 <path> 元素默认按几何轮廓做点击检测（hit-testing），不是包围盒。只要 d 属性描述的路径闭合、坐标归一化，点在哪、哪响应，像素级匹配。
关键在路径定义方式：用 clipPathUnits="objectBoundingBox" 把坐标缩放到 0–1 范围，就能适配任意尺寸容器；而直接写像素单位（如 d="M10 20 L50 30"）会导致缩放后错位。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 路径必须闭合：末尾加
Z或closepath，否则浏览器可能透出不可控区域 - 不要对
<path>加transform缩放——它会干扰 hit-testing 计算，改用 viewBox 和归一化坐标更稳 - 务必设
fill="transparent" stroke="none"，否则会遮挡底层内容或触发重绘异常
怎么让 SVG path 和 HTML 元素位置严丝合缝？靠绝对定位 + 尺寸同步
把 <path> 叠在裁剪后的 HTML 元素上方，不是靠 margin/padding 对齐，而是用 position: absolute + top: 0; left: 0; + 宽高与目标元素完全一致。任何偏差都会导致视觉和点击区域错位。
示例结构：
<div class="btn-wrapper">
<button class="btn-visual" style="clip-path: polygon(0% 0%, 100% 0%, 50% 100%); pointer-events: none;"></button>
<svg viewBox="0 0 100 100" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
<path d="M0,0 L100,0 L50,100 Z" fill="transparent" pointer-events="auto"/>
</svg>
</div>
-
<svg>必须设viewBox，否则坐标系统不生效；width/height设为100%才能随父容器缩放 -
<path>的d值坐标要和 CSS 中clip-path: polygon()的百分比数值一一对应（比如50% 100%→50,100） - 避免用外部 SVG 文件或
<use>引用——DOM 不可访问时，pointer-events: auto会失效
area 标签还值得用吗？仅限静态图像映射
<area> 只能在 <map> + <img> 组合中用，且只支持 rect、circle、poly 三种形状。它不能响应 CSS 动画、不能适配响应式缩放（坐标是固定像素）、不能套在 flex/grid 布局里——2026 年已基本退出主流交互方案。
唯一适用场景：后台导出的静态地图截图，需要快速标注几个固定坐标点。一旦涉及缩放、动画、动态数据绑定，立刻换 SVG <path>。
-
<area shape="poly">的坐标必须是逗号分隔的像素值（如coords="10,20,30,40,50,60"），无法用百分比 - 没有
hover或focus伪类支持，样式控制能力极弱 - 无障碍支持差，屏幕阅读器难以识别区域语义
<path> 的 viewBox 和 CSS clip-path 坐标系之间的映射关系——它们看起来都是“点坐标”，但一个基于归一化单位，一个依赖容器尺寸计算。差一个百分号或小数点，热区就偏移十几像素。 
