clipPath是矢量路径精准裁剪，仅显示区域内部且硬边无透明度；mask基于灰度控制透明度，支持渐变和羽化。前者轻量语义明确，后者适合复杂混合效果。
SVG遮罩（mask）和裁剪路径（clipPath）都能实现“只显示指定区域”的效果，但二者原理不同、适用场景也不同。要构建自定义形状的裁剪效果，clipPath 是更直接、更轻量、更语义明确的选择；而 mask 更适合需要灰度级透明度控制的复杂混合效果。
clipPath：用矢量路径精准裁剪内容
clipPath 本质是定义一个“可见区域边界”，所有被它包裹的元素（如图片、文字、其他 SVG 图形）只会显示落在该区域内部的部分，外部完全不可见——类似物理模板开孔。
- 定义方式简单：在
<defs></defs>中声明一个<clippath></clippath>，内部放任意 SVG 形状（<path></path>、<circle></circle>、<polygon></polygon>等） - 应用方式统一：通过 CSS 的
clip-path属性或 SVG 的clip-path属性引用，例如clip-path="url(#myClip)" - 路径坐标基于被裁剪元素自身的坐标系（默认为 userSpaceOnUse），无需额外对齐计算
用 path 构建任意自定义裁剪轮廓
真正实现“自定义形状”的关键，在于 <path></path> 元素。你可以手写贝塞尔曲线，也可以从设计工具导出路径数据。
- 确保路径是闭合的（以
Z或z结尾），否则裁剪行为可能不符合预期 - 路径填充色不影响裁剪结果，但建议设为
fill="black"（clipPath 内部颜色无实际意义，仅作可读性参考） - 示例：裁剪为心形
mask vs clipPath：别混用，按需选
mask 使用灰度图逻辑：白色=完全显示，黑色=完全隐藏，灰色=半透明。它支持渐变、模糊、多层叠加，但性能开销更大，且需注意 alpha 通道处理。
- 用 clipPath：只需硬边裁剪、形状固定、追求性能与语义清晰（比如头像切圆角、图标套镂空模板）
- 用 mask：需要羽化边缘、透明度过渡、或基于图像亮度做动态遮罩（比如用一张 PNG 当遮罩纹理）
- 注意：CSS 中
clip-path属性不支持 mask 的灰度能力，它底层仍映射到 SVG clipPath 行为
实用技巧与常见避坑点
- clipPath 默认坐标系是
userSpaceOnUse，若想随元素缩放/平移自动适配，可改用objectBoundingBox并将路径坐标归一化到 [0,1] 范围 - 对 HTML 元素使用
clip-path: url(#myClip)时，确保 SVG 定义在当前页面内（不能跨 iframe 或外部文件） - Firefox 对 CSS
clip-path的url()支持稳定，但旧版 Safari 需加-webkit-前缀（现已基本无需） - 调试建议：临时把 clipPath 内的形状设为
stroke="red" fill="none"，叠加在目标元素上查看轮廓是否对齐
