clip-path仅裁剪视觉区域，不改变原始矩形点击热区；必须配合pointer-events:none禁用原元素事件，并叠加同路径SVG<path>遮罩层（fill="transparent"、pointer-events:auto）实现精确交互匹配。
clip-path 只裁剪视觉，不改变点击区域——想让点击精准匹配多边形形状，必须用定位叠加一层同路径遮罩，并严格控制 pointer-events。
为什么直接写 clip-path: polygon(...) 点击区域还是矩形？
这是规范行为，不是 bug。浏览器渲染时仍按原始盒模型（getBoundingClientRect() 返回的矩形）做 hit-testing。哪怕你把一个 div 剪成星形，鼠标移到星形外、原矩形内的空白处，依然会触发 click 或 hover。
- 常见错误：只加
clip-path就以为交互已同步，结果测试时边缘总误触 -
pointer-events: polygon是废弃草案，所有浏览器都不支持，别写 - 纯 CSS 无解——必须引入额外 DOM 层或 SVG 路径做事件代理
用 position: absolute 遮罩层实现像素级对齐
核心是让遮罩层和目标元素在视觉上完全重叠，且坐标系一致。任何尺寸、定位或 transform 的偏差都会导致点击偏移。
- 父容器必须设
position: relative，确保两者定位上下文相同 - 遮罩层宽高推荐用
inset: 0，比width: 100%; height: 100%更抗缩放和 box-sizing 变化 - 若目标元素有
border或padding，遮罩层也得同步设置，否则getBoundingClientRect()不一致 - 目标元素本身加
pointer-events: none；遮罩层设pointer-events: auto（默认值，可省略） - 遮罩层背景不能是
background: none，部分浏览器下会失效；建议用background: transparent或临时加background: rgba(0,0,0,0.01)调试对齐
确保 polygon() 坐标在两处完全一致
CSS 的 clip-path: polygon() 和遮罩层的形状必须数值、单位、顺序一模一样，否则热区错位。
立即学习“前端免费学习笔记（深入）”；
- 避免混用单位：
polygon(0% 0%, 200px 0, 200px 100px)在部分浏览器中解析失败或降级为矩形 - 响应式场景优先用百分比，但要保证目标元素宽高稳定（如设固定
width/height或aspect-ratio） - 若用 px 单位，遮罩层和目标元素必须尺寸绝对一致；可用 DevTools 查看两者的
getBoundingClientRect()是否完全重合 - 调试技巧：给遮罩层临时加
outline: 1px solid red，肉眼验证是否严丝合缝
为什么 SVG <path> 比纯 CSS 遮罩更可靠？
SVG 的 hit-testing 基于真实路径轮廓，不受包围盒干扰，且支持更复杂曲线。但代价是需要手动保持路径字符串同步。
- CSS 写
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)→ SVG 中对应d="M0,0 L100,0 L50,100 Z"（注意单位换算，建议 viewBox="0 0 100 100"） - SVG
<path>必须设fill="transparent"和stroke="none"，否则会遮挡内容或触发渲染异常 - inline SVG 更可控：避免外部引用导致路径加载延迟或跨域问题
- 移动端 iOS Safari 对
transform+clip-path组合有兼容性陷阱，而 SVG<path>不受此影响
最易被忽略的是坐标系对齐细节：哪怕遮罩层偏移 1px、或目标元素用了 box-sizing: content-box 而遮罩层是 border-box，都会让点击热区漂移。动手前先用 DevTools 把两个元素的 bounding rect 打出来比对，比猜更可靠。
