clipPath必须定义在<defs>内，否则静默失效；ID需全局唯一且引用格式为clip-path="url(#id)"，clipPathUnits设为objectBoundingBox可实现响应式裁剪，多图形裁剪需clip-rule="evenodd"支持镂空效果。
clipPath必须定义在里，否则不生效
直接把<clipPath>写在<svg>根标签下但不在<defs>中，浏览器不会报错，而是静默忽略——这是最常卡住的第一步。SVG规范要求所有可复用资源（<clipPath>、<mask>、<pattern>）必须声明在<defs>容器内，才能被clip-path="url(#id)"正确引用。
<defs>不渲染自身内容，只提供定义；它可放在<svg>开头或结尾，只要在引用前已解析即可。ID必须全局唯一——多个SVG共存时，重复ID会导致后加载的覆盖前一个，裁剪错乱。引用格式必须严格为clip-path="url(#myClip)"，少一个url()或漏掉#都无效。
clipPathUnits决定坐标单位，响应式场景必须设为objectBoundingBox
默认clipPathUnits="userSpaceOnUse"，意味着<circle cx="50" cy="50" r="20">里的数值是按SVG画布像素算的，跟目标元素尺寸无关。一旦目标缩放或宽高比变化，裁剪区域就“偏了”。
想让裁剪形状随目标等比缩放，必须显式设置clipPathUnits="objectBoundingBox"。这时所有坐标变成0–1范围：cx="0.5" cy="0.5" r="0.3"表示居中、半径占目标宽高中较小值的30%；<polygon points="0,0 1,0 1,1">表示左上→右上→右下三角形，始终贴目标边界。注意：此时混用像素值（如cx="50"）会被当50倍单位处理，结果异常。
立即学习“前端免费学习笔记（深入）”；
多图形组合裁剪需用clip-rule="evenodd"实现“挖空”效果
一个<clipPath>可包含多个图形，默认按clip-rule="nonzero"（非零环绕规则）叠加——外圆+内圆会整个显示，而不是你想要的环形。
要实现“镂空”，必须加clip-rule="evenodd"切换奇偶规则：
- 两个同心圆：外圆顺时针、内圆逆时针 +
clip-rule="evenodd"→ 只保留环形区域 - 星形轮廓包着一个矩形 → 加
clip-rule="evenodd"可让矩形区域变透明（即“扣掉”）
不设clip-rule时，路径方向直接影响填充判断，调试困难；且clip-rule只对<clipPath>内部多个图形生效，单个图形无需设置。
SVG clipPath引用到HTML元素时，需隐藏SVG本身
把<svg>内联进HTML用于定义<clipPath>时，它会占据页面空间，导致布局错乱。正确做法是让SVG不可见但保留在DOM中：
- 加
style="width: 0; height: 0; position: absolute; visibility: hidden;" - 或用
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0;">
确保<defs>在引用前已加载；跨iframe无法引用ID，url(#id)只在当前文档生效。复杂路径（如手绘轮廓、星形）用<path d="...">写进<clipPath>比硬写CSS clip-path: path("...")更可靠——后者在Safari 15.4+才支持，且DPR变化时边缘易漂移。
