SVG的<clipPath>定义裁剪区域使目标图形仅在区域内渲染，需在<defs>中定义并用clip-path引用ID；支持多种形状及坐标系设置，裁剪路径不渲染且需显式应用。
SVG 的 <clipPath> 通过定义一个“裁剪区域”，让目标图形只在该区域内可见，区域外的部分被隐藏——不是透明，而是完全不渲染。
基本用法：先定义，再引用
必须把 <clipPath> 写在 <defs> 里，然后用 clip-path 属性引用它的 ID：
<svg width="200" height="200">
<defs>
<clipPath id="circle-clip">
<circle cx="100" cy="100" r="60"/>
</clipPath>
</defs>
<rect x="0" y="0" width="200" height="200"
fill="skyblue"
clip-path="url(#circle-clip)" />
</svg>
上面代码会让一个蓝色矩形只在圆形范围内显示，其余部分被裁掉。
支持的裁剪形状不止圆形
<clipPath> 内部可以放任意 SVG 图形元素，包括：
-
<rect>（矩形裁剪） -
<path>（自定义路径，最灵活，比如星形、文字轮廓、不规则多边形） -
<ellipse>、<polygon>、<polyline> - 甚至多个图形组合（取交集，即只保留所有图形重叠的部分）
注意坐标系和引用方式
裁剪区域默认使用**对象坐标系**（objectBoundingBox），也就是相对于被裁剪元素自身宽高归一化（0–1）。但更常用的是显式设置 clipPathUnits="userSpaceOnUse"，这样内部图形坐标就直接对应 SVG 画布单位：
<clipPath id="top-left-rect" clipPathUnits="userSpaceOnUse"> <rect x="0" y="0" width="80" height="80"/> </clipPath>
不加这个属性时，<rect x="0" y="0" width="0.5" height="0.5"> 表示裁剪左上角四分之一区域。
常见小坑提醒
- 裁剪路径本身不会渲染，它只是“模板”，不用设 fill/stroke
- 被裁剪元素必须显式声明
clip-path，不能靠父容器自动继承 - CSS 中也可用
clip-path: url(#id)裁剪 HTML 元素（需注意浏览器兼容性） - 动画或 JS 动态修改裁剪路径是可行的，但要确保 ID 正确且 DOM 已就绪
基本上就这些。核心就是：定义一个“镂空模板”，再把它扣到目标图形上。
