SVG 中剪辑和遮罩的综合指南

剪切和遮罩是 svg 的一项功能，它能够通过使用简单或复杂的形状来完全或部分隐藏对象的某些部分。多年来，许多开发人员已经掌握了这些能力，并将它们推向了各个方向。在本文中，咱们将了解一些高级方法以及展示剪辑和遮罩效果的演示。让咱们开始吧！

什么是剪辑？什么是掩蔽？

咱们先回答这个问题：裁剪和遮罩有什么区别？为了更好地理解，咱们将逐一研究。请注意，虽然规范中概述的大多数功能现在都可以使用，但有些功能不会。始终在浏览器中仔细检查caniuse 以及您自己的测试。

剪裁

剪切路径是一个对象，其中定义形状内的所有内容都是可见的，而外部部分被“剪掉”并且不会出现在画布

在上面的示例图像中，咱们的形状（Envato 徽标）是咱们将用作剪辑路径对象的对象。结果是从纯色背景中切出的，只留下咱们“剪切区域”形式的硬形状。

掩蔽

在这里，咱们采用将通过蒙版绘制到背景上的图形对象或形状，从而完全或部分屏蔽对象的某些部分。

将蒙版视为接受已由对象形状定义的可见区域的一种方式。在这种情况下，咱们的蒙版是咱们希望从纯色背景中“提取”的对象。结果是与咱们的蒙版相同的形状（即纯黑色形状）。

区别

仍然对区别感到困惑吗？这两种类型的选项之间有一个非常微妙的区别。将剪切路径视为“硬蒙版”，其中删除的剪切对象是一个没有任何透明或不透明像素的形状。蒙版由一个形状或图像组成，其中每个像素具有不同程度的透明度和不透明性，可以透过或以非常微妙的方式隐藏部分。

现在让咱们讨论一些在 SVG 中启用剪辑和遮罩的元素和属性。

剪辑路径

SVGclipPath接受许多属性和内容模型类型。接受的内容模型类型包括 title， description 以及其他类型的元数据标签。它还接受 SMIL 动画标签，例如<animate>、<animatetransform>、 SVG 形状（circle、rect、polygon、path），包括 <text>、<use>、style和<script>。您甚至可以clipPath 在一个 parent 中有多个定义clipPath。

这是一个使用元标记、SMIL 和 SVG 形状的片段：

<svg viewBox="0 0 100 100" xmlns="https://www.w3.org/2000/svg" version="1.1">
    <defs>
        <clipPath id="my-clip">
            <title>My Clip Path</title>
            <desc>an svg rectangle using a circle as the clipping target and animated with SMIL</desc>
            <rect x="0" y="0" width="200" height="600">
            <animate attributeType="XML"
                     attributeName="x"
                     from=“-200"
                     to=“400"
                     dur="5s"
                     repeatCount="indefinite"/>
            </rect>
        </clipPath>
    </defs>

    <circle clip-path="url(#my-clip)" width="200" height="200" cx="50" r="50" cy="50" fill="green" />
</svg>

在 SVG 中创建的AclipPath也可以使用如下clip-path属性从 css 中引用：

.element {
    clip-path: url("#my-clip");
}

在这里，我使用url()函数引用咱们之前的 SVG 片段中的剪辑，并传递咱们的clipPath. 还可以选择使用图像作为 a 的目标clipPath：

<svg viewBox="0 0 200 300">
    <defs>
        <clipPath id="clip">
            <style>
            circle {
                fill: black;
            }
            </style>
            <circle cx="100" cy="100" r="100"/>
        </clipPath>
    </defs>

    <image height="100%" preserveAspectRatio="xMinYMin slice" width"100%" xlink:href="https://images.unsplash.com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" clip-path="url(#clip)" />
</svg>

此片段中的图像使用 SVG 形状（圆形）作为其剪切对象。结果是一个圆圈，里面有一个图像；很漂亮吧？您可能还会注意到style标签包含在 clipPath. <style> 放置在 clipPath （或 a ）内的任何标签都mask将胜过任何相关属性和外部 CSS。

clipPath 属性

有几个属性clipPath可以接受，当然太多了。clipPath 值得本文讨论的具体属性是clipPathUnits和clip-rule。这是一个描述每个人的作用以及如何选择适当值的简要说明。

剪辑路径单位

这个属性是一个非常重要的属性，因为它有助于定义内容的“坐标系”或换句话说“位置” clipPath 。它接受两种类型的值，但只能传递一种。默认情况下userSpaceOnUse会选择您通常会使用的那个。

See the Pen Clipping and Masking in SVG by Envato Tuts+ (@tutsplus) on CodePen.

userSpaceOnUse在引用元素时，clipPath当前用户坐标系中的表示值的内容clipPath，或者换句话说，引用clipPath viaclip-path 属性的元素的用户坐标系。
objectBoundingBox 坐标系的原点位于应用剪切路径的元素边界框的左上角，并且该边界框的宽度和高度相同。用户坐标的大小等同于 CSSpx单元。

剪辑规则

是clip-rule另一个重要属性，但正确掌握也相当复杂，属于 clipPath. 此属性仅适用于包含在 clipPath元素中的图形元素。与属性结合使用时，它定义了在填充图形的不同部分时使用的剪辑规则或算法。也可以通过使用 . clip-pathfill-rule

clip-rule可以放在一个clipPath，从您的 CSS 文件中引用，或内联 SVG 样式。fill-rule也可以放置在剪辑对象的目标上，但是这两个选项会产生非常不同的结果。

See the Pen Clip Rule by Envato Tuts+ (@tutsplus) on CodePen.

nonzero：此值通过从起点沿任意方向绘制一条线到无穷远，并计算形状段在特定方向上与该线相交的位置，来定义一个点是在路径内部还是外部。当一个线段从左到右穿过这条线时，计数增加；当一个线段从右到左穿过这条线时，计数减少。如果计数为零，则该点在外部；如果非零，则在其内部。
evenodd：这个值定义了一个点是在路径的内部还是外部，方法是从该点在任何方向上画一条线到无穷远，并计算该线穿过的形状段的数量。如果计数是奇数，则该点在里面；如果偶数，该点在外面。

面具

Mask 可以通过使用<mask>. 虽然它具有在 SVG 中定义的能力，但也可以通过 mask属性在 CSS 中引用。掩码可以接受一个clipPath或另一个mask （hello inception）。W3C 规范接受并完整列出了不同类型的内容模型。

这是一个使用 SVG 形状作为遮罩对象并针对内联 SVG 图像的代码示例。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">    
<defs>        
<mask id="image-mask">            
<circle id="outer" cx="50" cy="50" r="50" fill="white"/>            
<circle id="inner" cx="50" cy="50" r="25"/>        
</mask>    
</defs>    
<image width="100%" height="100%" 
preserveAspectRatio="xMidYMid slice" 
xlink:href="https://images.unsplash. com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" 
mask="url(#image-mask)"></image></svg>

此代码示例会生成一个甜甜圈，其中内圈是透明的，外缘允许图像透过。本文末尾有一个完整的演示，展示了结果。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <mask id="SVGMask" mask-type="luminance" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
            <style>
            #rect {
                mask-image: url(#SVGMask);
                mask-mode: luminance;
            }
            </style>
            <radialGradient id="radialFill">
                <stop stop-color="white" offset="0"/>
                <stop stop-color="black" offset="1"/>
            </radialGradient>
            <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
        </mask>
    </defs>
    <rect id="rect" width="100" height="100" fill="green"/>
</svg>

这是另一个代码片段，其中我使用 CSS 属性作为嵌套在其中的内联样式mask来引用咱们的遮罩对象，并使用亮度（从表面发出的光的强度）控制照明模式。

掩码图像

作者可以通过多种方式在 SVG 中定义遮罩。第一个是通过使用 mask="url(#id-value)" 通常在 SVG 中的目标上定义的 SVG 属性，另一个是mask-image.

就像一样mask，该mask-image属性接受一个标识符，例如上面代码片段中使用的掩码 ID 的值。如果在 CSS 中使用，您可以通过 url 函数引用 SVG 文件本身 mask-image: url(your-external-file.svg#the-mask-id-value)。

掩码模式

此属性确定蒙版是否被视为亮度蒙版或 alpha 蒙版。值 alpha 控制蒙版允许的透明度，值 luminance 控制发出的光的强度。如果您决定将其定义为 SVG 蒙版上的属性，您可以 mask-type 直接在 SVGmask元素上使用该属性，或者您也可以mask-mode 在 CSS 中使用定义。

掩码单位

<mask maskUnits="[objectBoundingBox | userSpaceOnUse]">

很像 clipPathUnits，面具有一个非常相似的属性。此遮罩属性有助于定义 x、 y、 width 和 height等属性的坐标系。如果不存在值， objectBoundingBox 则默认使用的值。

userSpaceOnUse：引用元素的用户坐标系 <mask>
objectBoundingBox: 可以认为边界框与将内容 <mask> 绑定到“ 0 0 1 1”视图框相同。

掩码内容单元

<mask maskContentUnits="[objectBoundingBox | userSpaceOnUse]">

定义掩码内容的坐标系。就像maskUnits, 它也接受 userSpaceOnUseorobjectBoundingBox作为一个值。如果未传递任何值， userSpaceOnUse 则默认使用的值。

userSpaceOnUse：元素引用的用户坐标系<mask>
objectBoundingBox: 可以认为边界框与的内容 <mask> 绑定到相同viewbox="0 0 1 1"。

用例

今天有一些非常聪明的方法可以在你的工作中实现蒙版和剪辑路径。

演示 1

这是一个使用 Slack 式加载上下文的示例，咱们给用户一种感知加载内容的感觉（点击右下角的重新运行以查看效果）。

See the Pen Advanced SVG Clipping: Preloading Content by Envato Tuts+ (@tutsplus) on CodePen.

一旦获得 api 数据，咱们就可以开始推出内容。这是结合了 CSS 渐变、CSS 动画和 SVG 的使用clipPath。原始创作者 Yacine的道具激发了我上面的更新演示。我应该指出，为了朝着这个方向发展，您需要使用 SVG 编辑器（例如 sketch）重新创建最终产品的占位符外观，以创建初始结构。