Chrome 62–97/Android WebView 75–96 因 Blink 未实现标准 clip-path 而完全不解析；内联 SVG 的 必须置于 内且 ID 全局唯一；外链 SVG 中 url(#id) 失效因作用域隔离；iOS 14.6+ 需父容器显式设 overflow: hidden。
clip-path: url(#id) 在 Chrome 62–97 / Android WebView 75–96 中根本不会解析
不是写法错，也不是漏了 -webkit-clip-path，而是这些版本的 Blink 引擎压根没实现标准 clip-path 语法。你写 clip-path: polygon(0 0, 100% 0, 100% 100%) 或 -webkit-clip-path: polygon(...)，浏览器连解析都不做——DevTools 的 Elements 面板里该样式直接不出现，或显示为划掉的 invalid 状态。
典型表现：同一段代码在 Chrome 98+ 正常裁剪，在 Chrome 95 下渲染为完整矩形；Android WebView 96 同样失效，且无法靠 UA 判断，必须实测。
此时强行内联 SVG + clipPath 也无效，因为 CSS 层面的 url(#id) 引用根本走不到 SVG 渲染管线。
内联 SVG 的 <clippath></clippath> 必须放在 <defs></defs> 里，否则静默失效
很多人把 <clippath id="myClip">...</clippath> 直接写在 <svg></svg> 根标签下，看起来结构合理，但浏览器会完全忽略它——不报错、不警告，就是不裁剪。
立即学习“前端免费学习笔记（深入）”；
原因很明确：SVG 规范要求可复用资源（<clippath></clippath>、<mask></mask>、<pattern></pattern>）必须声明在 <defs></defs> 容器内，才能被后续元素通过 clip-path="url(#myClip)" 正确引用。
-
<defs></defs>可以放在<svg></svg>开头或结尾，只要 DOM 解析顺序上在引用前即可 - ID 必须全局唯一；多个 SVG 共存时重复 ID，后加载的会覆盖前一个，导致裁剪错乱
- 引用写法必须是
clip-path="url(#myClip)"，少url()、漏#、大小写不一致（如#MyClipvs#myclip）都会失败
外链 SVG（<img alt="为什么CSS属性clip-path在部分浏览器路径失效_使用内联SVG的clipPath定义" > / background-image）中 url(#id) 一定失效
这是最隐蔽的坑：用 <img src="icon.svg" alt="为什么CSS属性clip-path在部分浏览器路径失效_使用内联SVG的clipPath定义" > 或 background-image: url("logo.svg") 引入 SVG 时，clip-path: url(#clipId) 永远不会生效。
根本原因是作用域隔离——url(#clipId) 是 fragment 引用，只在当前文档 DOM 树内有效；而外链 SVG 是独立资源，浏览器不会跨文档解析其内部 ID。
可行方案只有：
- 改用内联 SVG：把整个
<svg></svg>块直接写进 HTML，确保<defs></defs>和目标元素同属一个 DOM 上下文 - 在 React/Vue 中动态生成唯一 ID：避免组件复用导致 ID 冲突，例如用
useId()或Math.random().toString(36).substr(2, 9) - 不用 CSS 的
clip-path，改用 SVG 的clip-path属性（即写在<rect clip-path="url(#id)"></rect>上），它只对同文档 SVG 元素生效
iOS Safari 14.6+ 要求父容器显式声明 overflow: hidden
即使内联 SVG + <defs></defs> + 正确 ID 全部到位，在 iPhone 12 / iOS 14.6+ 设备上仍可能白屏或裁剪失效——这不是 bug，是 Safari 渲染引擎对层叠上下文更严格的处理逻辑。
现象：其他平台正常，唯独 iOS 14.6+ 上 clip-path 不起作用，目标元素显示为完整矩形或空白背景。
解决方案极其简单但极易忽略：
- 给应用
clip-path的元素的**直接父容器**加上overflow: hidden - 这个父容器不能是
body或未设尺寸的 flex 容器，必须是有明确宽高的块级元素 - 不需要加
position: relative，但若父容器本身有 transform，需注意层叠上下文影响
这行样式在旧版 iOS 和 Android 上非必需，但在 14.6+ 是硬性前提——漏掉它，整个裁剪链就断了。
