Edge 18及更早版本（EdgeHTML内核）完全不支持任何CSS clip-path语法，包括polygon()、circle()和inset()，需强制降级为内联SVG <clipPath>方案，ID须合法、坐标用objectBoundingBox单位且SVG必须内联。
Edge 18 及更早版本（EdgeHTML 内核）压根不支持 clip-path 的任何 CSS 路径语法，包括 polygon()、circle() 甚至 inset() —— 不是写法问题，是引擎能力缺失。
为什么 clip-path 在旧 Edge 里静默失效
旧 Edge（≤18）用的是 EdgeHTML 引擎，它从未实现标准 clip-path。加 -webkit- 前缀、写 url(#id)、补 transform 都没用——样式会被浏览器直接忽略，DevTools 里连这条规则都看不到。你看到的“完整矩形”，不是 bug，是 fallback 行为。
-
clip-path: polygon(0 0, 100% 0, 100% 100%)→ 渲染为原始矩形 -
clip-path: circle(50% at 50% 50%)→ 同样无裁剪 -
clip-path: url(#my-clip)→ 若 SVG 未内联或 ID 不匹配，也静默失败
用 SVG <clipPath> 是最稳的降级方案
SVG <clipPath> 从 Edge 12 开始就支持，IE9 也能跑，兼容性远高于 CSS 版 clip-path。关键是必须内联、ID 合法、单位用 objectBoundingBox。
<svg width="0" height="0" style="position: absolute"><defs><clipPath id="avatar_clip" clipPathUnits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.5"/></clipPath></defs></svg>- CSS 中写：
clip-path: url(#avatar_clip)（注意 ID 不能含点、斜杠、空格） - 坐标用小数（如
cx="0.5"）而非像素，缩放时裁剪区域才随元素等比缩放 - 外链 SVG 或
url(external.svg#id)在旧 Edge 里不生效，必须内联在 HTML 中
哪些写法会直接踩坑
即使用了 SVG 方案，以下操作仍会导致裁剪失效或偏移：
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
overflow: hidden但没加position: relative或transform: translateZ(0)→ Safari 和旧 Edge 会截断裁剪区域 -
<img>元素同时用了object-fit: cover和clip-path: url(#id)→ 图像拉伸后坐标错乱 - ID 写成
#avatar.clip或#avatar/clip→ 浏览器解析失败，必须是合法 CSS 标识符（如#avatar_clip） - 对
display: inline元素直接应用clip-path→ 先设display: block或inline-block
要不要用 @supports 做渐进增强
可以，但别只靠它兜底。旧 Edge 不支持 @supports (clip-path: polygon(0 0))，这个检测本身就会失败。真正有效的判断方式是：
- 用 UA 字符串识别
Edge/[0-18]或Trident/（IE）→ 直接加载 SVG 降级逻辑 - 或更稳妥：默认走 SVG 内联方案，新浏览器（Chrome 98+、Safari 15.4+、Edge 79+）也能正常渲染
url(#id) - 如果设计师坚持要 polygon()，且目标环境明确不含旧 Edge → 才考虑用
@supports包裹 CSS 版本，否则纯属增加风险
真正麻烦的不是写法，而是旧企业环境里那些锁死在 IE 兼容模式或 Edge 16 的终端——它们连 clip-path: url() 的解析都可能出偏差。SVG 内联 + objectBoundingBox + 合法 ID，这三样缺一不可，少一个就白忙活。
