SVG的clipPath是通过定义可见区域实现精准形状抠图的蒙版机制，不改变原图形；需在中定义并用url(#id)引用，支持圆形、多边形、文字轮廓等，可设clipPathUnits控制坐标单位，支持非零或奇偶裁剪规则。

SVG的clipPath是HTML5中实现精准形状抠图的核心机制，它不改变原图形本身，而是通过定义一个“可见区域”来控制哪些部分显示、哪些被隐藏——本质是蒙版逻辑，不是图像编辑意义上的“裁剪”。关键在于理解clipPath只作用于其子元素的绘制区域，且默认坐标系与引用它的元素对齐。

clipPath基础写法与引用方式

必须先定义（通常放在内），再用clip-path CSS属性或clip-path SVG属性引用。ID必须唯一，且引用时带url(#id)语法：

• 定义在中：
• 应用到目标元素：
• 也可用CSS：style="clip-path: url(#circleClip);"，适用于SVG和HTML元素（需浏览器支持）

常见抠图形状快速实现

不用JavaScript，纯SVG就能完成圆形、多边形、文字轮廓等抠图效果，关键是路径描述准确：

• 圆形/椭圆抠图：直接用或作为clipPath内容，中心点与目标元素位置匹配即可
• 不规则多边形：用，注意点坐标是相对于被裁元素左上角的绝对值（除非显式设置clipPathUnits="objectBoundingBox"）
• 文字镂空效果：把放入clipPath，文字笔画区域即为可见区，适合做标题遮罩

坐标单位与缩放适配要点

clipPath默认使用用户坐标系（userSpaceOnUse），意味着内部图形尺寸按实际像素计算；若希望裁剪区域随目标元素缩放，应设clipPathUnits="objectBoundingBox"，此时坐标变为0–1范围（如cx="0.5" cy="0.5" r="0.3"表示居中、半径占宽高的30%）：

• 未设置clipPathUnits时，指画布上固定位置
• 设为objectBoundingBox后，同样代码表示“相对目标元素50%位置、半径为30%宽高”，响应式更友好
• 混合使用需谨慎：CSS的clip-path: path("...")走的是另一种语法，与SVGclipPath不互通

组合与嵌套裁剪技巧

一个clipPath可包含多个图形，它们默认按“非零环绕规则”（nonzero）叠加；用clip-rule="evenodd"可切换为奇偶规则，实现挖空效果：

• 两个同心圆：外圆fill="white"，内圆fill="black"，配合clip-rule="evenodd"，得到环形可见区
• 多个拼接复杂轮廓，比如星形+内切圆，控制是否镂空中心
• 不能直接嵌套clipPath，但可用包裹其他带clip-path的元素实现多层限制

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！