Edge 18及更早版本完全不支持clip-path，必须改用内联SVG <clipPath>方案：SVG需内联、ID合法、显式声明clipPathUnits="objectBoundingBox"并用小数坐标。
clip-path 在 Edge 18 及更早版本（EdgeHTML 内核）中完全不支持，不是写法问题，是引擎级缺失。直接加 -webkit- 前缀、补 url(#id)、套 @supports 都无效——样式会被浏览器静默忽略，DevTools 里都看不到这条规则。
必须内联 SVG <clipPath>，且 ID 合法
Edge 12 起就支持内联 SVG <clipPath>，比 CSS 版本兼容性高得多。关键点有三个：
-
<svg>必须内联在 HTML 中（不能外链），width="0" height="0"+position: absolute避免占位 - ID 必须是合法 CSS 标识符：不能含点（
.）、斜杠（/）、空格或大写字母，推荐用下划线（如#avatar_clip） -
clipPathUnits="objectBoundingBox"必须显式声明，坐标用小数（如cx="0.5"），否则缩放时裁剪区域会错位
示例 SVG 片段（建议放在 <body> 开头）：
<svg width="0" height="0" style="position: absolute">
<defs>
<clipPath id="star_clip" clipPathUnits="objectBoundingBox">
<path d="M0.5,0 L0.61,0.35 L0.97,0.35 L0.68,0.57 L0.79,0.92 L0.5,0.7 L0.21,0.92 L0.32,0.57 L0.03,0.35 L0.39,0.35 Z"/>
</clipPath>
</defs>
</svg>
CSS 中直接引用：clip-path: url(#star_clip)
立即学习“前端免费学习笔记（深入）”；
别踩这些坑：父容器、display 和 object-fit 干扰
即使 SVG 正确内联，以下情况仍会导致裁剪失效或偏移：
- 父容器设了
overflow: hidden但没加position: relative或transform: translateZ(0)→ Safari 和旧 Edge 会截断裁剪区域 -
<img>同时用了object-fit: cover和clip-path: url(#id)→ 图像拉伸后坐标系错乱，切口位置漂移 - 对
display: inline元素（如默认<span>）直接应用clip-path→ 必须先设display: block或inline-block
@supports 检测在旧 Edge 里根本不可靠
@supports (clip-path: polygon(0 0)) 这个检测本身在 Edge ≤18 中就会失败，因为浏览器连 @supports 的语法解析都不支持。真正有效的判断方式只有两个：
- 用 UA 字符串识别
Edge/[0-18]或Trident/（IE）→ 直接加载 SVG 内联逻辑 - 更稳妥的做法：默认走 SVG 内联方案，新浏览器（Chrome 98+、Safari 15.4+、Edge 79+）也能正常渲染
url(#id)
复杂点在于，SVG <clipPath> 的路径坐标必须和目标元素比例一致；如果元素宽高动态变化（比如响应式图片），又没用 objectBoundingBox 单位，裁剪形状就会失真。这不是 CSS 层能自动修正的，得从结构和单位源头控制。
