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