clipPath是SVG中实现精准图形裁剪最常用、最灵活的方式，通过定义可见区域轮廓控制显示部分，支持path任意形状、文字镂空、相对坐标适配及fill-rule布尔组合等高级用法。
SVG 中的 clipPath 是实现精准图形裁剪最常用、最灵活的方式，它不改变原图形本身，只控制“哪些部分可见”，特别适合做非矩形遮罩、文字镂空、不规则头像框、动态裁切动画等效果。
clipPath 的基本用法
clipPath 本质是一个定义“可见区域轮廓”的容器，需配合 clip-path CSS 属性或 SVG 元素的 clip-path 属性使用。关键点：
- 必须定义在
<defs>内，才能被复用 - 内部只能包含基础图形（
<circle>、<path>、<text>等），不能嵌套其他<clipPath> - 默认坐标系与引用它的元素相同；可加
clipPathUnits="objectBoundingBox"切换为相对单位（0–1）
用 path 定义任意裁剪形状
最强大的能力来自 <path>：贝塞尔曲线、多边形、甚至手绘 SVG 路径都能作为裁剪边界。例如做一个水滴形遮罩：
<defs>
<clipPath id="droplet" clipPathUnits="objectBoundingBox">
<path d="M0.5,0 C0.7,0.2 0.9,0.4 0.9,0.6 C0.9,0.8 0.7,1 0.5,1 C0.3,1 0.1,0.8 0.1,0.6 C0.1,0.4 0.3,0.2 0.5,0 Z" />
</clipPath>
</defs>
<image href="photo.jpg" width="200" height="200" clip-path="url(#droplet)" />
注意：使用 objectBoundingBox 时，所有坐标按 0–1 归一化，这样裁剪形状会随目标元素缩放自动适配。
文字作为裁剪路径（文字镂空效果）
<text> 元素本身可直接用作裁剪轮廓，常用于“图片透过文字显示”的视觉效果：
<defs>
<clipPath id="textClip">
<text x="50" y="100" font-size="60" font-family="Arial" font-weight="bold">SVG</text>
</clipPath>
</defs>
<rect x="0" y="0" width="300" height="150" fill="#ff6b6b" />
<image href="pattern.png" width="300" height="150" clip-path="url(#textClip)" />
效果是图片只在“SVG”文字笔画区域内显示，背景色从文字缝隙中透出。如需反向（只显示文字外区域），可用 clip-rule="evenodd" 配合复合路径，或改用 <mask>。
组合与复用技巧
多个图形可叠加进同一个 <clipPath>，用布尔逻辑隐式组合（默认取交集）；如需并集或差集，需手动拼接 <path> 数据或使用 fill-rule 控制填充判断方式：
-
fill-rule="nonzero"：默认，适合单闭合路径 -
fill-rule="evenodd"：支持奇偶填充规则，可用于挖空内部区域（如圆环、带孔文字）
一个常见场景：圆形头像 + 外发光边框，只需把圆和稍大的同心圆组合成路径，并设 fill-rule="evenodd"，就能裁出“圆环状遮罩”。
