遮罩与裁剪：何时使用每个

我最近在做一些客户工作，其中我在 SVG 中同时使用了<clipPath>和<mask>来隐藏和显示动画内容。当我开始这个项目时，我以为我知道所有在两者之间进行选择的原因。但是，正如经常发生的那样，与某个事物密切合作揭示了其特质。在这篇文章中，我们将介绍其中的一些细节，以便您能够尽快提高工作效率。

什么是裁剪和遮罩，为什么我们应该关心它？

裁剪和遮罩都用于遮挡 SVG 或 HTML 元素中可以视觉应用的区域。您可以使用指定为<clipPath>或<mask>的 SVG 片段来包裹元素并应用 ID，如下所示

查看 Sarah Drasner 的 CodePen 作品 d2a9315e310901a3d43ba3bdf8413c65 (@sdras) 在 CodePen 上。

尽管这些技术的演示无法与 Yoksel 的版本相媲美，该版本不仅全面涵盖了 SVG，还涵盖了 CSS 版本的裁剪和遮罩

查看 yoksel 的 CodePen 作品 CSS 和 SVG 遮罩 (@yoksel) 在 CodePen 上。

这些技术非常有用，因为我们可以显示和隐藏内容片段，这可以用于独特的布局、动画的真实感以及高度过渡的高性能替代方案。

裁剪

将 SVG 中的<clipPath>（或 CSS 中的clip-path）视为从另一个形状中裁剪出形状的一种方式。这里没有不透明度或 alpha 通道的概念来使区域变灰。应用了裁剪路径的元素的部分是字面上的可见或不可见。裁剪仅使用形状的几何形状。因此，某些视觉元素将不会应用。这包括但不限于：描边和描边样式、渐变和填充颜色。

但是，您仍然可以为这些视觉元素设置动画、更改其属性并向其应用变换，这些将仍然有效。请记住，当您为其设置动画时，需要定位<clipPath>内的元素。需要牢记的另一件事是，被裁剪掉的部分将不会接受指针事件，因此事件只能在您可以视觉看到的部件上捕获。

查看下面的 Wall-e 演示。您是否看到手臂在伸出然后缩回身体时是如何被遮挡的？为了逼真地隐藏和显示该手臂，我们需要在它移动时将其遮挡。在本例中，我们使用肘部曲线创建了一个clipPath，并在手臂伸展时裁剪了手臂的部分。

查看 Sarah Drasner 的 CodePen 作品 Vue 控制的 Wall-E (@sdras) 在 CodePen 上。

当然，这还没有结束，我们可以将此技术应用于更复杂的效果，例如来自 Noel Delgado 的这台令人惊叹的 X 射线机

查看 Noel Delgado 的 CodePen 作品 X 射线扫描 (SVG 实验) (@noeldelgado) 在 CodePen 上。

遮罩

将遮罩视为一种将复杂、详细和具有不同不透明度的形状应用于另一个元素的方式。这可以产生非常漂亮的视觉效果，并且是其他技术的性能替代方案。例如，为渐变设置动画可能非常占用 CPU。但在下面的图形中，我们为遮罩而不是渐变设置动画以获得相同的视觉效果，并且它轻得多。

查看 Sarah Drasner 的 CodePen 作品 为透明遮罩设置动画 (@sdras) 在 CodePen 上。

由于 SVG 支持文本并且每个部分都是可编辑的，因此我们还可以创建有趣的效果来显示和隐藏正在更改的数据部分。查看来自 Craig Roblewsky 的此演示

查看 Craig Roblewsky 的 CodePen 作品 快速提示：使用遮罩反转 SVG 文本填充颜色 (@PointC) 在 CodePen 上。

与裁剪不同，遮罩确实尊重描边和描边效果，但请记住，在遮罩中，它会将白色视为将显示的区域，将黑色视为要遮罩的区域，灰度级会沿着该比例显示每个区域。

这意味着，您可以使用具有白色和透明度的 gif 来创建遮罩，从而显示出非常酷的效果

查看 Sarah Drasner 的 CodePen 作品 SVG 中的 Gif 遮罩 (@sdras) 在 CodePen 上。

我从 Yoksel 那里学到了制作上述演示所需的一切知识，他拥有大量使用此技术的 CodePen 作品，这里有一个我特别喜欢的作品，其中包含一只鸟和一个渐变，以及背景中的微妙纹理。

查看 yoksel 的 CodePen 作品 彩虹鸟 (@yoksel) 在 CodePen 上。