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 的
很多人把 根标签下，看起来结构合理，但浏览器会完全忽略它——不报错、不警告，就是不裁剪。
原因很明确：SVG 规范要求可复用资源（clip-path="url(#myClip)" 正确引用。
-
开头或结尾，只要 DOM 解析顺序上在引用前即可 - ID 必须全局唯一；多个 SVG 共存时重复 ID，后加载的会覆盖前一个，导致裁剪错乱
- 引用写法必须是
clip-path="url(#myClip)"，少url()、漏#、大小写不一致（如#MyClipvs#myclip）都会失败
外链 SVG（![]()
background-image）中 url(#id) 一定失效
这是最隐蔽的坑：用 
background-image: url("logo.svg") 引入 SVG 时，clip-path: url(#clipId) 永远不会生效。
根本原因是作用域隔离——url(#clipId) 是 fragment 引用，只在当前文档 DOM 树内有效；而外链 SVG 是独立资源，浏览器不会跨文档解析其内部 ID。
可行方案只有：
- 改用内联 SVG：把整个
块直接写进 HTML，确保 - 在 React/Vue 中动态生成唯一 ID：避免组件复用导致 ID 冲突，例如用
useId()或Math.random().toString(36).substr(2, 9) - 不用 CSS 的
clip-path，改用 SVG 的clip-path属性（即写在
iOS Safari 14.6+ 要求父容器显式声明 overflow: hidden
即使内联 SVG +
现象：其他平台正常，唯独 iOS 14.6+ 上 clip-path 不起作用，目标元素显示为完整矩形或空白背景。
解决方案极其简单但极易忽略：
- 给应用
clip-path的元素的**直接父容器**加上overflow: hidden - 这个父容器不能是
body或未设尺寸的 flex 容器，必须是有明确宽高的块级元素 - 不需要加
position: relative，但若父容器本身有 transform，需注意层叠上下文影响
这行样式在旧版 iOS 和 Android 上非必需，但在 14.6+ 是硬性前提——漏掉它，整个裁剪链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
