clip-path: url(#id) 在 iOS Safari 15.4 及更早版本完全不支持，WebKit 未实现该语法，即使 SVG 内联、ID 合法、路径完整也会静默忽略；须升级至 iOS 16.6+/macOS Ventura 13.5+ 才支持，且 ID 仅允许字母、数字、下划线、短横线，clipPathUnits="objectBoundingBox" 必须显式声明以确保响应式裁剪。
clip-path: url(#id) 在 iOS Safari 15.4 及更早版本完全不解析
不是写法错，是 WebKit 根本没实现该语法。Safari 15.4 及之前版本对 clip-path: url(#id) 的支持为零——即使 SVG <clipPath> 正确内联、ID 合法、引用路径完整，浏览器也会静默忽略整条声明，DevTools 中该样式直接不出现（而非划掉）。实测触发条件明确：iOS 15.4 ≤ Safari ≤ 16.5，且与是否加 -webkit-clip-path 无关。
验证方式很简单：getComputedStyle(el).clipPath 返回空字符串，或在 Elements 面板里根本看不到该属性被应用。
- 必须升级到 iOS 16.6+ 或 macOS Ventura 13.5+ 才开始支持
url()引用 - Android WebView 75–96 同样不支持，不能靠 UA 判断，得用真实设备跑
document.querySelector('svg #my_clip')+el.style.clipPath = 'url(#my_clip)'实测 - 别试图用
@supports (clip-path: url(#test))检测——旧 Safari 连这个特性查询都返回false，但也不报错，容易误判
SVG 内联时 ID 命名含点号或斜杠直接失效
写成 <clipPath id="my.clip"> 或 <clipPath id="icon/arrow">，再配 clip-path: url(#my.clip)，在所有移动端 Safari 和大部分 Android Chrome 中都会失败。原因很直接：CSS ID 选择器不认点号（.）和斜杠（/），它们不是合法 CSS 标识符，浏览器解析时直接丢弃引用。
错误现象是元素完全无裁剪，且控制台无任何提示——静默失败最坑人。
立即学习“前端免费学习笔记（深入）”；
- ID 必须只含字母、数字、下划线（
_）、短横线（-），例如my_clip或icon-arrow - 如果从设计工具导出 SVG 自动带点号，务必全局替换，不要只改 HTML 里的
url()部分 - Vue/React 中动态生成 ID 时，用
id.replace(/[^\w-]/g, '_')预处理，比事后调试快得多
clipPathUnits="objectBoundingBox" 缺失导致响应式裁剪错位
内联 SVG 的 <clipPath> 默认使用 userSpaceOnUse 坐标系，即单位是像素，原点在 SVG viewport 左上角。一旦目标元素缩放、flex 布局拉伸或 transform: scale() 应用，裁剪路径就严重偏移或缩放失真。
真正让 url(#id) 响应式的唯一可靠方式，是显式声明 clipPathUnits="objectBoundingBox"，此时坐标值变为 0–1 的归一化小数（如 0.5 0.5 表示中心）。
- 漏写这句，
polygon(0.5,0.0,1.0,0.5,0.5,1.0,0.0,0.5)会按像素渲染，不是按比例 - 必须配合
viewBox="0 0 1 1"使用，否则归一化无效；不要设width/height属性，让 SVG 自适应容器 - Chrome 98+ 对
objectBoundingBox支持稳定，但 iOS 16.6 刚引入时有小概率忽略该属性，建议加transform: translateZ(0)强制合成层
动态更新 SVG 路径后 clip-path 不重绘
在 Vue/React 中修改内联 SVG 的 <path d="...">，或 JS 直接改 svgEl.querySelector('path').setAttribute('d', newD)，clip-path: url(#id) 绑定的元素往往不会自动重绘——裁剪区域卡在旧路径，尤其在 iOS 上极其顽固。
这不是缓存问题，而是 WebKit 对 url() 引用的路径变更监听机制缺失。
- 强制重绘的最小代价方案：临时清空再恢复
style.clipPath，例如el.style.clipPath = ''→el.style.clipPath = 'url(#my_clip)' - React 中可在
useEffect里用ref拿到元素后执行上述 toggle - 避免在高频滚动或动画帧中这么做，会触发 layout，改用
transform模拟裁剪更稳
真正难的不是把 SVG 路径画出来，而是当它嵌在 position: absolute 的弹窗里、又被 scale(0.95) 微调、还要在 iOS 16.6 和 Android Chrome 115 之间表现一致时，clipPathUnits、ID 合法性、重绘时机这三处细节漏掉任何一环，裁剪就“看起来正常”但实际失效。
