SVG的clipPath是通过定义可见区域实现精准形状抠图的蒙版机制，不改变原图形；需在中定义并用url(#id)引用，支持圆形、多边形、文字轮廓等，可设clipPathUnits控制坐标单位，支持非零或奇偶裁剪规则。
SVG的clipPath是HTML5中实现精准形状抠图的核心机制，它不改变原图形本身，而是通过定义一个“可见区域”来控制哪些部分显示、哪些被隐藏——本质是蒙版逻辑，不是图像编辑意义上的“裁剪”。关键在于理解clipPath只作用于其子元素的绘制区域，且默认坐标系与引用它的元素对齐。
clipPath基础写法与引用方式
必须先定义<clippath></clippath>（通常放在<defs></defs>内），再用clip-path CSS属性或clip-path SVG属性引用。ID必须唯一，且引用时带url(#id)语法：
- 定义在
<defs></defs>中：<clippath id="circleClip"><circle cx="50" cy="50" r="30"></circle></clippath> - 应用到目标元素：
<rect x="0" y="0" width="100" height="100" clip-path="url(#circleClip)"></rect> - 也可用CSS：
style="clip-path: url(#circleClip);"，适用于SVG和HTML元素（需浏览器支持）
常见抠图形状快速实现
不用JavaScript，纯SVG就能完成圆形、多边形、文字轮廓等抠图效果，关键是路径描述准确：
-
圆形/椭圆抠图：直接用
<circle></circle>或<ellipse></ellipse>作为clipPath内容，中心点与目标元素位置匹配即可 -
不规则多边形：用
<polygon points="x1,y1 x2,y2 ..."></polygon>，注意点坐标是相对于被裁元素左上角的绝对值（除非显式设置clipPathUnits="objectBoundingBox"） -
文字镂空效果：把
<text></text>放入clipPath，文字笔画区域即为可见区，适合做标题遮罩
坐标单位与缩放适配要点
clipPath默认使用用户坐标系（userSpaceOnUse），意味着内部图形尺寸按实际像素计算；若希望裁剪区域随目标元素缩放，应设clipPathUnits="objectBoundingBox"，此时坐标变为0–1范围（如cx="0.5" cy="0.5" r="0.3"表示居中、半径占宽高的30%）：
立即学习“前端免费学习笔记（深入）”；
- 未设置
clipPathUnits时，<circle cx="50" cy="50" r="20"></circle>指画布上固定位置 - 设为
objectBoundingBox后，同样代码表示“相对目标元素50%位置、半径为30%宽高”，响应式更友好 - 混合使用需谨慎：CSS的
clip-path: path("...")走的是另一种语法，与SVGclipPath不互通
组合与嵌套裁剪技巧
一个clipPath可包含多个图形，它们默认按“非零环绕规则”（nonzero）叠加；用clip-rule="evenodd"可切换为奇偶规则，实现挖空效果：
- 两个同心圆：外圆
fill="white"，内圆fill="black"，配合clip-rule="evenodd"，得到环形可见区 - 多个
<path></path>拼接复杂轮廓，比如星形+内切圆，控制是否镂空中心 - 不能直接嵌套
clipPath，但可用<g clip-path="..."></g>包裹其他带clip-path的元素实现多层限制
