SVG中<clipPath>必须通过id引用，定义在<defs>内并用clip-path="url(#id)"调用；内部仅支持<circle>、<rect>、<path>等几何元素，不支持<g>、滤镜或渐变；clipPathUnits可选userSpaceOnUse或objectBoundingBox，后者需目标元素有明确宽高；HTML元素裁剪优先使用CSS clip-path。
SVG里<clipPath>必须用id引用，不能直接嵌套使用
直接把<clipPath>写在<svg>内部却没给id，或者试图用class选择器控制裁剪，都会失效。SVG裁剪依赖clip-path CSS属性或clip-path SVG属性指向一个带id的<clipPath>元素，不是靠DOM结构嵌套生效。
正确做法是：把<clipPath>定义在<defs>里，并赋予唯一id；目标图形通过clip-path="url(#myClip)"引用它。
-
<defs>不是必须的，但强烈建议放里面——避免渲染干扰，语义清晰 - 引用时
url(#xxx)里的#xxx必须和<clipPath id="xxx">完全一致（区分大小写） - 不能用
clip-path: url(.my-class)，CSS里不支持类名引用SVG裁剪路径
裁剪路径内容只能是基础图形或<use>，不能含滤镜、渐变或嵌套<g>
<clipPath>内部只接受可绘制的几何元素：<circle>、<rect>、<path>、<polygon>，以及<use>（引用前述元素）。任何<filter>、<linearGradient>、<g>或文本节点都会被忽略，且浏览器不会报错，只是裁剪失效。
常见错误是复制一段带<g transform="...">的路径进去，结果裁剪区域偏移或消失——因为<g>本身不产生形状，<clipPath>只认最终像素轮廓。
立即学习“前端免费学习笔记（深入）”；
-
<path>推荐用绝对坐标（M,L,Z），相对命令（m,l）容易因坐标系理解偏差出错 -
<use href="#myPath">可以复用已有<path>，但#myPath必须在同个SVG文档内 - 多个图形叠加裁剪？用
clipPathUnits="objectBoundingBox"配合<path>手动拼合，别指望自动布尔运算
clipPathUnits设为objectBoundingBox时，坐标是0–1归一化值
默认clipPathUnits="userSpaceOnUse"，坐标单位和SVG画布一致（如width="200"则x最大200）；设成objectBoundingBox后，所有坐标按被裁剪元素的宽高归一化——x="0.5"表示水平居中，width="1"表示占满自身宽度。这个模式适合响应式裁剪，但新手常误用像素值导致裁剪区域极小或偏移。
- 改用
objectBoundingBox时，必须确保被裁剪元素有明确宽高（比如<rect width="100" height="100">），否则归一化无基准 -
<clipPath clipPathUnits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.4"/></clipPath>会裁出圆形区域，无论目标元素实际尺寸多大 - 混合单位危险：
<rect x="50" width="100">被objectBoundingBox裁剪时，x="50"会被当作50倍自身宽度，大概率超出范围
HTML中内联SVG裁剪对CSS动画支持有限，clip-path CSS属性更灵活
如果只是想对普通HTML元素（如<div>或图片）做裁剪，直接用CSS的clip-path属性比塞SVG更轻量，也支持transition和@keyframes。SVG内联<clipPath>无法被CSS动画控制cx/cy等属性（这些是SVG DOM属性，非CSS变量）。
- CSS写法：
div { clip-path: circle(50% at 50% 50%); }，可配合transition: clip-path 0.3s - 要兼容旧浏览器？用
clip-path: url(#myClip)回退，但动画仍受限 - 复杂路径想动态生成？优先用
clip-path: path("M0,0 L100,0 ...")（Chrome 111+支持），比维护SVG<clipPath>简单
真正需要SVG<clipPath>的场景其实不多：比如裁剪多个不同坐标系的SVG元素、需复用同一裁剪逻辑、或必须配合<mask>做透明度叠加。多数情况，先试试纯CSS方案。
