CSS 遮罩模块第 1 级

1. 引言

本节不具有规范性。

本规范定义了两种不同的图形操作，它们都可以完全或部分隐藏对象的某些部分：裁剪和遮罩。

1.1. 裁剪

闭合的矢量路径、形状或多边形定义了所谓的裁剪路径。该裁剪路径是一个区域（在没有抗锯齿的情况下），该区域“内部”的所有内容都可以显示出来，而外部的所有内容都会被“裁剪掉”且不会出现在画布上。

裁剪路径（中）应用于填充有不同颜色的多边形（左）。这导致了一个“裁剪出”的形状（右）。

clip-path 属性可以使用指定的“基本形状”作为裁剪路径，或引用带有 图形元素 的 clipPath 元素作为裁剪路径。

1.2. 遮罩

将遮罩应用于图形对象的效果，就如同通过遮罩将图形对象绘制到背景上，从而完全或部分地遮住图形对象的某些部分。

亮度遮罩（中）应用于填充有渐变的形状（左）。这导致了一个被遮罩的形状（右）。

遮罩使用 mask-image 或 mask-border-source 属性应用。

mask-image 属性可以引用 mask 元素。mask 元素的内容充当遮罩。

或者，对于许多简单的用途，mask-image 属性可以直接指向用作遮罩的图像，而无需显式的 mask 元素。此遮罩随后可以像 CSS 背景图像一样，通过 mask-position、mask-size 及其他特征属性进行调整大小和定位。

mask-border-source 属性将遮罩分割成 9 个部分。这些部分可以通过多种方式进行切片、缩放和拉伸，以适应 遮罩边框图像区域 的大小。mask-border 属性充当 mask-border-source 和其他特征属性的简写属性。

mask 属性充当所有 mask-border 和 mask-image 相关属性的简写属性。

注意： 虽然遮罩为增强图形效果提供了许多可能性，并且通常能更好地控制内容的“可见部分”，但裁剪路径的性能更好，且基本形状更易于插值。

2. 模块交互

本规范定义了一组影响应用这些属性的元素视觉渲染的 CSS 属性。这些效果在元素根据 [CSS21] 中的 视觉格式化模型 完成大小和位置设定后应用。这些属性的某些值会导致创建一个 层叠上下文。此外，本规范替换了 [CSS21] 中 Clipping: the clip property 一节。

合成模型遵循 SVG 合成模型 [SVG11]：首先，元素在没有滤镜效果、遮罩、裁剪和不透明度的情况下进行样式化。然后，将该元素及其后代绘制到临时画布上。在最后一步中，按顺序对该元素应用以下效果：滤镜效果 [FILTER-EFFECTS]、裁剪、遮罩和不透明度。

本规范允许使用 CSS 合成与混合 [COMPOSITING-1] 中定义的 Porter-Duff 合成运算符来合成多个遮罩层。

术语 对象边界框 遵循 SVG 1.1 [SVG11] 中的定义。

3. 值

本规范遵循 [CSS21] 中的 CSS 属性定义约定。基本形状在 CSS 形状模块级别 1 [CSS-SHAPES] 中定义。这些规范中未定义的值类型在 CSS 值和单位模块级别 3 [CSS3VAL] 中定义。

除了定义中列出的属性特定值外，本规范中定义的所有属性也都接受 CSS 范围内的关键字（如 inherit）作为其属性值 [CSS3VAL]。为保证可读性，未再明确重复说明。

4. 术语

本规范中 CSS 属性和值的定义类似于 CSS 背景和边框 [CSS3BG] 中的定义。为避免冗余，本规范依赖于 CSS 背景和边框的描述和定义。CSS 背景和边框中的以下术语在本规范中具有以下含义

5. 裁剪路径

裁剪路径限制了可以应用绘制的区域，即所谓的 裁剪区域。从概念上讲，位于该区域之外的任何绘图部分都不会被绘制。这包括应用裁剪路径的元素的任何内容、背景、边框、文本装饰、轮廓和可见滚动机制，以及其后代的内容。

元素的祖先也可能裁剪其内容的部分（例如，通过它们自己的 clip 或 clip-path 属性，和/或如果它们的 overflow 属性不是 visible）。最终渲染的是累积的交集。

如果裁剪区域超出了 UA 文档窗口的边界，内容可能会被原生操作系统环境裁剪到该窗口。

裁剪路径会影响元素的渲染。它不会影响元素的固有几何形状。被裁剪元素（即通过 clip-path 属性引用 clipPath 元素的元素，或引用元素的子元素）的几何形状必须保持与未被裁剪时相同。

<g clip-path="circle()">
  <path id="shape" d="M0,0 L10,10, L 20,0 z"/>
</g>

<use xlink:href="#shape"/>

默认情况下，pointer-events 不得在形状的裁剪掉（不可见）区域上分发。例如，一个尺寸为 10px x 10px 并被裁剪为半径为 5px 的圆形的元素，将不会接收 裁剪区域 之外的 click 事件。

5.1. 裁剪形状：clip-path 属性

指定一个基本形状或引用一个 clipPath 元素来创建一个 裁剪路径。

<clip-source> = <url>

<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

对于没有关联 CSS 布局框的 SVG 元素，content-box 和 padding-box 的 使用值 是 fill-box，而 border-box 和 margin-box 是 stroke-box。

对于有关联 CSS 布局框的元素，fill-box 的 使用值 是 content-box，而 stroke-box 和 view-box 是 border-box。

计算值除 none 外，会导致创建一个 层叠上下文 [CSS21]，方式与 CSS opacity [CSS3COLOR] 在值不为 1 时相同。

如果 URI 引用无效（例如它指向一个不存在的对象，或者该对象不是 clipPath 元素），则不应用裁剪。

clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
        122px 57px, 184px 73px, 198px 105px, 199px 150px,
        145px 159px, 155px 139px, 126px 120px, 112px 138px,
        80px 128px, 39px 126px, 24px 104px);

clip-path: url("#clip1");

<clipPath id="clip1">
    <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
        199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/>
</clipPath>

clip-path 属性是 SVG 元素的 呈现属性。

6. SVG 裁剪路径源

6.1. clipPath 元素

属性定义

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

定义 clipPath 内容的坐标系。

userSpaceOnUse（用户空间使用）

clipPath 的内容表示引用 clipPath 元素时所处的当前 用户坐标系 中的值（即通过 clip-path 属性引用 clipPath 元素的元素所处的 用户坐标系）。

objectBoundingBox（对象边界框）

该坐标系的原点位于应用裁剪路径的元素的 边界框 的左上角，宽度和高度与此 边界框 相同。用户坐标 的大小与 CSS px 单位相当。

如果未指定 clipPathUnits 属性，则效果如同指定了 userSpaceOnUse 一样。

可动画化: 是。

CSS 属性从其祖先继承到 clipPath 元素中；属性不从引用 clipPath 元素的元素中继承。

clipPath 元素永远不会被直接渲染；其唯一用途是被 clip-path 属性引用。display 属性不适用于 clipPath 元素；因此，即使 display 属性设置为除 none 以外的值，clipPath 元素也不会被直接渲染，并且即使在 clipPath 元素或其任何祖先上的 display 属性设置为 none 时，clipPath 元素也可用于引用。

clipPath 元素可以包含 path 元素、text 元素、基本形状（如 circle）或 use 元素。如果 use 元素是 clipPath 元素的子元素，它必须直接引用 path、text 或 基本形状 元素。间接引用是错误的，必须忽略 clipPath 元素。

Firefox 禁止渲染引用内容模型被破坏的 clipPath 的元素。没有浏览器忽略 use 上带有间接引用的 clipPath。<https://github.com/w3c/csswg-drafts/issues/17>

每个子元素的原始几何形状（不包括如 fill、stroke、stroke-width 等渲染属性）在 clipPath 内在概念上定义了一个 1-bit 遮罩（沿几何边缘可能的抗锯齿除外），该遮罩代表了与该元素关联的图形的轮廓。对象轮廓之外的所有内容都被遮罩掉。如果子元素因 display 或 visibility 而变得不可见，则它不会对裁剪路径做出贡献。当 clipPath 元素包含多个子元素时，子元素的轮廓在逻辑上进行 OR（或）运算以创建一个单一轮廓，该轮廓随后用于限制可以应用绘制的区域。因此，如果一个点位于 clipPath 的任何子元素内，则该点就在裁剪路径内。

定义与 CSS 属性相关的原始几何形状。特别是在文本上。<https://github.com/w3c/csswg-drafts/issues/170>

对于给定的 图形元素，所使用的实际裁剪路径将是其 clip-path 属性（如有）指定的裁剪路径与其祖先上的任何裁剪路径的交集，这些裁剪路径由建立新视口的元素上的 clip-path 属性指定。（参见 [SVG11]）

一些补充

• clipPath 元素本身及其子元素不继承 clipPath 元素祖先的裁剪路径。

• clipPath 元素或其任何子元素可以指定 clip-path 属性。
  如果在 clipPath 元素上放置了有效的 clip-path 引用，则最终的裁剪路径是 clipPath 元素的内容与所引用的裁剪路径的交集。
  如果在 clipPath 元素的子元素之一上放置了有效的 clip-path 引用，则在将该子元素的轮廓与其它子元素的轮廓进行 OR 运算之前，该子元素会被所引用的裁剪路径裁剪。

• 空的裁剪路径将完全裁剪掉应用了 clip-path 属性的元素。

6.2. 填充规则：clip-rule 属性

clip-rule 属性指示用于确定给定点是否位于使用 图形元素 创建的 裁剪区域 内的算法。算法和 clip-rule 值的定义遵循 fill-rule 属性的定义。参见 SVG 1.1 [SVG11] 中的 “Fill Properties” 一节。

nonzero

参见 fill-rule 属性的描述 [SVG11]。

evenodd

参见 fill-rule 属性的描述 [SVG11]。

clip-rule 属性仅适用于包含在 clipPath 元素内的 图形元素。

注意： clip-rule 属性不适用于 <basic-shape>s。

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

clip-rule 属性是 SVG 元素的 呈现属性。

7. 定位遮罩

7.1. 遮罩图像源：mask-image 属性

此属性设置元素的 遮罩层图像。其中

<mask-reference> = none | <image> | <mask-source>

<mask-source> = <url>

<url>

指向 mask 元素（例如 url(commonmasks.svg#mask)）或 CSS 图像的 URL 引用。

none（无）

值 none 被视为透明的黑色图像层。

计算值除 none 外，会导致创建一个 层叠上下文 [CSS21]，方式与 CSS opacity [CSS3COLOR] 在值不为 1 时相同。

为空图像（零宽度或零高度）、下载失败、不是对 mask 元素的引用、不存在或无法显示（例如因为它不是受支持的图像格式）的遮罩引用，仍被视为透明黑色的图像层。

参见 “遮罩处理” 一节，了解如何处理 遮罩层图像。

注意： <mask-reference> 列表中的 none 值可能会影响遮罩操作，具体取决于 mask-composite 指定的合成运算符。

注意： <mask-source> 被视为遮罩层，可以在可重复的 <mask-reference> 列表中与 <image> 或更多 <mask-source> 列表项组合使用。

注意： 元素也可以使用 mask-border-source 进行遮罩。参见 mask-border-source，了解该属性与 mask-image 的交互。

body { mask-image: linear-gradient(black 0%, transparent 100%) }
p { mask-image: none }
div { mask-image: url(resources.svg#mask2) }

参见 “分层多个遮罩层图像” 一节，了解 mask-image 如何与其他逗号分隔的遮罩属性交互以形成每个遮罩层。

7.2. 遮罩图像解释：mask-mode 属性

mask-mode 属性指示 <mask-reference> 是作为亮度遮罩还是 Alpha 遮罩处理。（参见 遮罩处理。）

<masking-mode> = alpha | luminance | match-source

值的含义如下：

alpha

值 alpha 指示应将 遮罩层图像 的 Alpha 值用作遮罩值。参见 计算遮罩值。

亮度 (Luminance)

值 luminance 指示应将 遮罩层图像 的亮度值用作遮罩值。参见 计算遮罩值。

match-source

如果 mask-image 属性的 <mask-reference> 类型为 <mask-source>，则必须使用所引用 mask 元素的 mask-type 属性所指定的值。

如果 mask-image 属性的 <mask-reference> 类型为 <image>，则应将 遮罩层图像 的 Alpha 值用作遮罩值。

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
  <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>

<style>
  rect {
    mask-image: url(#SVGMask);
    mask-mode: luminance;
  }
</style>

<rect width="200" height="200" fill="green"/>

参见 “分层多个遮罩层图像” 一节，了解 mask-mode 如何与其他逗号分隔的遮罩属性交互以形成每个遮罩层。

7.3. 平铺遮罩图像：mask-repeat 属性

指定 遮罩层图像 在 调整大小 和 定位 后如何进行平铺。

属性值的定义参见 background-repeat 属性 [CSS3BG]。

body {
    background-color: blue;
    mask-image: url(dot-mask.png) luminance;
    mask-repeat: space;
}

参见 “分层多个遮罩层图像” 一节，了解 mask-repeat 如何与其他逗号分隔的遮罩属性交互以形成每个遮罩层。

7.4. 定位遮罩图像：mask-position 属性

属性值的定义参见 background-position 属性 [CSS3BG]。

body {
    mask-image: url("logo.png");
    mask-position: 100% 100%;
    mask-repeat: no-repeat;
}

mask-position: right 3em bottom 10px

参见 “分层多个遮罩层图像” 一节，了解 mask-position 如何与其他逗号分隔的遮罩属性交互以形成每个遮罩层。

7.5. 遮罩区域：mask-clip 属性

对于不引用 mask 元素的 遮罩层图像，mask-clip 确定 遮罩绘制区域，这决定了受遮罩影响的区域。元素的绘制内容必须限制在此区域内。

mask-clip 属性对引用 mask 元素的 遮罩层图像 没有影响。x、y、width、height 和 maskUnits 属性在 mask 元素上，确定了遮罩引用的 遮罩绘制区域。

值的含义如下：

content-box

绘制的内容被限制（裁剪）到 内容盒。

padding-box

绘制的内容被限制（裁剪）到 内边距盒。

border-box

绘制的内容被限制（裁剪）到 边框盒。

fill-box

绘制的内容被限制（裁剪）到 对象边界框。

stroke-box

绘制的内容被限制（裁剪）到 笔触边界框。

view-box

使用最近的 SVG 视口 作为参考框。

如果为创建 SVG 视口 的元素指定了 viewBox 属性

• 参考框被定位在由 viewBox 属性建立的坐标系的原点。

• 参考框的维度被设置为 viewBox 属性的 width 和 height 值。

no-clip

绘制的内容不受限制（未被裁剪）。

对于没有关联 CSS 布局框的 SVG 元素，content-box 和 padding-box 的 使用值 计算为 fill-box，而 border-box 和 margin-box 计算为 stroke-box。

对于有关联 CSS 布局框的元素，fill-box 的 使用值 计算为 content-box，而 stroke-box 和 view-box 计算为 border-box。

参见 “分层多个遮罩层图像” 一节，了解 mask-clip 如何与其他逗号分隔的遮罩属性交互以形成每个遮罩层。

7.6. 定位区域：mask-origin 属性

对于渲染为单个盒子的元素，指定 遮罩定位区域。对于渲染为多个盒子的元素（例如多行上的内联盒子，多个页面上的盒子），指定 box-decoration-break 作用于哪些盒子以确定遮罩定位区域。

对于没有关联 CSS 布局框的 SVG 元素，content-box、padding-box 和 border-box 的计算值均为 fill-box。

对于有关联 CSS 布局框的元素，fill-box、stroke-box 和 view-box 的计算值均为 mask-origin 的初始值。

注：mask-origin 属性类似于 background-origin 属性 [CSS3BG]，但它具有不同的属性值集合和不同的初始值。

注：如果 mask-clip 为 padding-box，mask-origin 为 border-box，mask-position 为 top left（初始值），并且元素具有非零边框，那么 遮罩层图像 的顶部和左侧将会被裁剪。

关于 mask-origin 如何与其他以逗号分隔的遮罩属性交互以形成各个遮罩层，请参阅 “多重遮罩层图像的堆叠” 一节。

7.7. 遮罩图像尺寸：mask-size 属性

指定 遮罩层图像 的大小。

有关属性值的定义，请参阅 background-size 属性 [CSS3BG]。

关于 mask-size 如何与其他以逗号分隔的遮罩属性交互以形成各个遮罩层，请参阅 “多重遮罩层图像的堆叠” 一节。

7.8. 遮罩层合成：mask-composite 属性

<compositing-operator> = add | subtract | intersect | exclude

每个关键字代表一个 Porter-Duff 合成运算符 [COMPOSITING-1]，用于定义当前遮罩层与其下方遮罩层的合成操作。

在下文中，当前遮罩层称为 源（source），其下方所有遮罩层（应用了相应的合成运算符）称为 目标（destination）。

如果没有后续的遮罩层，合成运算符将被忽略。遮罩层不得与元素的内容或元素背后的内容进行合成，它们必须表现为如同被渲染到一个孤立的组中一样。

在应用当前遮罩层的合成操作之前，必须先合成当前遮罩层之下的所有遮罩层。

此示例使用了两个 遮罩层图像：circle.svg 和 rect.svg。

这两个 遮罩层图像 均通过 mask-image 属性进行引用

mask-image: circle.svg, rect.svg;

rect.svg 的遮罩层位于 circle.svg 的遮罩层之下。这意味着 circle.svg 比 rect.svg 更靠近用户。

通过 mask-composite 属性，作者可以选择不同的方式来组合多个遮罩层。

• add 将 circle.svg 绘制在 rect.svg 之上。其行为由合成运算符 source over 描述。

  mask-composite: add;
  

  

• subtract 绘制 circle.svg 中不与 rect.svg 重叠的部分。其行为由合成运算符 source out 描述。

  mask-composite: subtract;
  

  

• intersect 绘制 circle.svg 中与 rect.svg 重叠的部分。其行为由合成运算符 source in 描述。

  mask-composite: intersect;
  

  

• exclude 绘制 circle.svg 和 rect.svg 中不重叠的部分。其行为由合成运算符 XOR 描述。

  mask-composite: exclude;
  

  

mask-image: rect.svg, circle.svg;
mask-composite: add, exclude;

这是一个包含 3 个遮罩层且具有不同合成运算符的示例。

mask-image: trapeze.svg, circle.svg, rect.svg;
mask-composite: subtract, add;

首先，circle.svg 被“添加”到 rect.svg。在第二步中，仅显示 trapeze.svg 中不与前两层合成结果重叠的部分。

关于 mask-composite 如何与其他以逗号分隔的遮罩属性交互以形成各个遮罩层，请参阅 “多重遮罩层图像的堆叠” 一节。

7.9. 遮罩简写：mask 属性

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

如果存在一个 <geometry-box> 值和一个 no-clip 关键字，那么 <geometry-box> 将设置 mask-origin，而 no-clip 将 mask-clip 设置为该值。

如果存在一个 <geometry-box> 值且没有 no-clip 关键字，那么 <geometry-box> 会将 mask-origin 和 mask-clip 同时设置为该值。

如果存在两个 <geometry-box> 值，则第一个设置 mask-origin，第二个设置 mask-clip。

如果 <mask-reference> 引用了一个 mask 元素，则 mask-repeat、mask-position、mask-clip、mask-origin 和 mask-size 属性的 使用值（used value） 必须不起作用。在这种情况下，该元素定义了 遮罩层图像 的位置、尺寸和裁剪。

mask 简写属性还会将 mask-border 重置为初始值。因此，建议作者使用 mask 简写属性，而不是其他简写或单独的属性，以覆盖级联中较早的任何遮罩设置。这将确保 mask-border 也已重置，从而使新样式生效。

7.10. 遮罩图像渲染模型

对于使用 CSS 盒模型格式化的元素，应用值非 none 的 mask-image 属性会像 CSS opacity [CSS3COLOR] 一样建立一个 堆叠上下文（stacking context），且该元素的所有后代作为一个整体进行渲染，并将遮罩应用于整个组。

mask-image 属性对任何元素的 CSS 盒的几何结构或点击测试（hit-testing）没有影响。

mask 属性是 SVG 元素的 呈现属性。

7.10.1. 遮罩处理

在以下章节中，遮罩图像 指的是 遮罩层图像 或 遮罩边框图像。

遮罩图像的解释可以采用两种不同的方法，具体取决于计算将与目标 alpha 值相乘的遮罩值的方式。

计算遮罩值的第一种也是最简单的方法是使用 遮罩图像 的 alpha 通道。在这种情况下，给定点的遮罩值就是该点 alpha 通道的值。颜色通道不会对遮罩值产生贡献。

计算遮罩值的第二种方法是使用遮罩图像的亮度。在这种情况下，给定点的遮罩值是使用以下过程，根据颜色通道值和 alpha 通道值计算得出的。

1. 从颜色通道值计算亮度值。

   • 如果 mask 元素上 color-interpolation 的计算值为 linearRGB，则将原始图像颜色值（可能处于 sRGB 色彩空间中）转换为 linearRGB 色彩空间。

   • 然后，使用非预乘的 RGB 颜色值，应用亮度到 alpha 的系数（如 feColorMatrix 滤镜基元 [SVG11] 中所定义），将 RGB 颜色值转换为亮度值。

2. 将计算出的亮度值乘以相应的 alpha 值，以产生遮罩值。

无论采用哪种方法，计算遮罩值的程序都假设遮罩的内容是一个四通道 RGBA 图形对象。对于其他类型的图形对象，需要进行如下特殊处理。

对于遮罩中使用的三通道 RGB 图形对象（例如引用三通道图像文件时），其效果如同该对象被转换为一个四通道 RGBA 图像，其中 alpha 通道统一设置为 1。

对于遮罩中使用的单通道图像（例如引用单通道灰度图像文件时），其效果如同该对象被转换为一个四通道 RGBA 图像，其中来自所引用对象的单个通道用于计算三个颜色通道，而 alpha 通道统一设置为 1。

注：引用灰度图像文件时，在计算颜色通道时必须考虑编码灰度值与线性光值之间的传输曲线。

注：SVG 图形元素（例如 circle 或 text）在遮罩操作中均被视为四通道 RGBA 图像。

遮罩的效果与没有遮罩但将给定对象的 alpha 通道与遮罩的结果遮罩值相乘的效果相同。

遮罩图像 未覆盖的区域被视为透明黑色。遮罩值为 0。

注：具有重复 遮罩图像 瓦片的遮罩彼此之间可能存在偏移。遮罩图像 之间的空间被视为透明黑色遮罩。

7.10.2. 多重遮罩图像的堆叠

盒的遮罩可以有多个层。层数由 mask-image 属性的逗号分隔值的数量决定。在包含其他 <mask-reference> 的值列表中，none 的值仍然会创建一个层。

参见 多重背景图像的堆叠 [CSS3BG]。

mask-mode 和 mask-composite 在 CSS 背景和边框 [CSS3BG] 中没有对应项。与具有对应项的遮罩属性一样，值列表从第一个值开始匹配：末尾多余的值不会被使用。如果一个属性没有足够的逗号分隔值来匹配层数，UA 必须通过重复值列表直到有足够的数量来计算其使用值。

所有 遮罩层图像 均被转换为 alpha 遮罩（如有必要，请参阅 遮罩处理），并考虑到 mask-composite 指定的合成运算符进行合成。

8. 边框盒遮罩（Border-Box Mask）

使用 mask-border，图像可以被分割成九个部分：四个角、四个边缘和中间部分，如下图所示。

遮罩边框图像 的部分。

这些部分可以以各种方式进行切片、缩放和拉伸，以适应 遮罩边框图像区域 的大小。这种变形后的图像随后被用作遮罩。mask-border 的语法对应于 CSS 背景和边框 [CSS3BG] 中的 border-image 属性。

下例中的 遮罩边框图像 被分割为四个 75 像素的角、四个边缘和一个被拉伸和缩放的中间部分。

mask-border 示例。左侧的对象是要遮罩的对象。第二张图像是 alpha 遮罩，最后一张图像是遮罩后的对象。

div {
    background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
    mask-border-slice: 25 fill;
    mask-border-repeat: stretch;
    mask-border-source: url(mask.png);
}

8.1. 遮罩边框图像源：mask-border-source 属性

指定用作 遮罩边框图像 的图像。

如果图像为空（零宽度或零高度）、下载失败、不存在或无法显示（例如因格式不受支持），则会被忽略。它仍然被计为 遮罩边框图像，但不会遮罩该元素。

请参阅 “遮罩处理” 以了解如何处理 遮罩边框图像。

计算值非 none 会像 CSS opacity [CSS3COLOR] 在值不为 1 时一样，建立一个 堆叠上下文 [CSS21]。

mask-border-source 和 mask-image 可以独立指定。如果两个属性的值均非 none，则元素将依次被两种遮罩操作遮罩。

注：无论 mask-image 是否在 mask-border-source 之前应用于元素，都没有关系。两种操作顺序都会产生相同的渲染结果。

8.2. 遮罩边框图像解释：mask-border-mode 属性

mask-border-mode 属性指示 mask-border-source 的 <image> 值是被视为亮度遮罩还是 alpha 遮罩。（请参阅 遮罩处理。）

值的含义如下：

mask-mode 和 mask-type 属性对 遮罩边框图像 类型没有影响。

8.3. 遮罩边框图像切片：mask-border-slice 属性

此属性指定从 遮罩边框图像 的上、右、下、左边缘向内的偏移量，将其划分为九个区域：四个角、四个边缘和一个中间部分。除非存在 fill 关键字，否则中间图像部分将被丢弃并视为完全不透明的白色（中间部分覆盖的内容不会被遮罩并透出）。

有关属性值的定义，请参阅 border-image-slice 属性 [CSS3BG]。

8.4. 遮罩区域：mask-border-width 属性

遮罩边框图像 绘制在一个名为 遮罩边框图像区域 的区域内。该区域的边界默认对应于边框盒，请参阅 mask-border-outset。

有关属性值的定义，请参阅 border-image-width 属性 [CSS3BG]。

注：对于没有关联布局框的 SVG 元素，border-width 被视为 0。

8.5. 边缘悬伸：mask-border-outset 属性

这些值指定了 遮罩边框图像区域 超出边框盒的范围。如果包含四个值，它们将依次设置上、右、下、左侧的外部距离。如果缺少左值，则与右值相同；如果缺少下值，则与上值相同；如果缺少右值，则与上值相同。

与 mask-border-width 一样，<number> 表示相应 border-width 的倍数。任何 mask-border-outset 值都不允许使用负数。

注：对于没有关联布局框的 SVG 元素，border-width 被视为 0。

8.6. 遮罩边框图像平铺：mask-border-repeat 属性

此属性指定如何缩放和平铺 遮罩边框图像 的侧面和中间部分。第一个关键字适用于水平侧，第二个适用于垂直侧。如果缺少第二个关键字，则假定其与第一个相同。

有关属性值的定义，请参阅 border-image-repeat 属性 [CSS3BG]。

缩放和平铺 遮罩边框图像 部分的确切过程在 使用遮罩边框图像进行遮罩 一节中给出

8.7. 遮罩边框简写：mask-border 属性

这是用于设置 mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeat 和 mask-border-mode 的简写属性。省略的值将设置为其初始值。

注：mask 简写属性会重置属性 mask-border、mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeat 和 mask-border-mode。

8.8. 使用遮罩边框图像进行遮罩

在 mask-border-source 给出的 遮罩边框图像 被 mask-border-slice 值切片后，所得的九个图像将在四个步骤中被缩放、定位和平铺到其对应的 遮罩边框图像 区域中，详见 绘制边框图像 [CSS3BG] 一节。

对于使用 CSS 盒模型格式化的元素，应用 mask-border-source 属性会像 CSS opacity [CSS3COLOR] 一样建立一个 堆叠上下文，且该元素的所有后代作为一个整体进行渲染，并将遮罩应用于整个组。

mask-border-source 属性对任何元素的 CSS 盒的几何结构或点击测试没有影响。

9. SVG 遮罩源

9.1. mask 元素

属性定义

maskUnits = "userSpaceOnUse | objectBoundingBox"

定义属性 x、y、width 和 height 的坐标系。

userSpaceOnUse（用户空间使用）

x、y、width 和 height 表示 mask 元素被引用时（即通过 mask 属性引用该 mask 元素的元素所处的）当前 用户坐标系 [CSS3-TRANSFORMS] 中的值。

objectBoundingBox（对象边界框）

x、y、width 和 height 表示应用遮罩的元素 对象外框 的分数或百分比。用户坐标 的大小等同于 CSS px 单位。

如果未指定属性 maskUnits，则其效果如同指定了 objectBoundingBox。

可动画化: 是。

maskContentUnits = "userSpaceOnUse | objectBoundingBox"

定义 mask 内容的坐标系。

userSpaceOnUse（用户空间使用）

mask 元素内容的 用户坐标系 是在 mask 元素被引用时（即通过 mask 属性引用该 mask 元素的元素所处的）当前 用户坐标系。

objectBoundingBox（对象边界框）

该坐标系的原点位于应用裁剪路径的元素的 外框 左上角，且具有与此 外框 相同的宽度和高度。用户坐标 的大小等同于 CSS px 单位。

如果未指定属性 maskContentUnits，则其效果如同指定了 userSpaceOnUse。

可动画化: 是。

x = "<length-percentage>"

最大可能的屏幕外缓冲矩形的一个角的 x 轴坐标。如果未指定该属性，但指定了属性 y、width 或 height 中的至少一个，则其效果如同指定了 -10%。

可动画化: 是。

y = "<length-percentage>"

最大可能的屏幕外缓冲矩形的一个角的 y 轴坐标。如果未指定该属性，但指定了属性 x、width 或 height 中的至少一个，则其效果如同指定了 -10%。

可动画化: 是。

width = "<length-percentage>"

最大可能的屏幕外缓冲区的宽度。负值或零值会禁用元素的渲染。如果未指定该属性，但指定了属性 x、y 或 height 中的至少一个，则其效果如同指定了 120%。

可动画化: 是。

height = "<length-percentage>"

最大可能的屏幕外缓冲区的高度。负值或零值会禁用元素的渲染。如果未指定该属性，但指定了属性 x、y 或 width 中的至少一个，则其效果如同指定了 120%。

可动画化: 是。

如果指定了属性 x、y、width 或 height 中的至少一个，则给定对象和由 x、y、width 和 height 定义的矩形将建立一个当前的裁剪路径。遮罩的渲染内容必须被该当前裁剪路径裁剪。

CSS 属性从祖先元素继承到 mask 元素中；属性不从引用该 mask 元素的元素进行继承。

mask 元素绝不会直接渲染；它们唯一的用途是作为可以使用 mask 属性引用的对象。opacity、filter 和 display 属性不适用于 mask 元素；因此，即使 display 属性设置为非 none 的值，mask 元素也不会被直接渲染，并且即使 mask 元素或其任何祖先上的 display 属性设置为 none，mask 元素仍然可供引用。

9.2. 遮罩源解释：mask-type 属性

mask-type 属性定义了 mask 元素的内容是被视为亮度遮罩还是 alpha 遮罩，如 计算遮罩值 中所述。

值的含义如下：

亮度 (Luminance)

指示应使用遮罩的亮度值。

alpha

指示应使用遮罩的 alpha 值。

mask-type 属性允许 mask 元素的作者指定首选遮罩模式。但是，作者可以通过将受遮罩内容上的 mask-mode 值设置为 match-source 之外的其他值来覆盖此首选项。

lt;svg>
 <mask style="mask-type: luminance;" id="mask2">
   ...
 </mask>
lt;/svg>

lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
 This is the masked content.
lt;/p>

mask-type 属性是 SVG 元素的 呈现属性。

10. 隐私与安全考虑

遮罩操作的时序独立于源像素和目标像素非常重要。遮罩操作必须以无论像素值如何都始终花费相同时间的方式实现。如果不遵循此规则，攻击者可能会推断出信息并进行时序攻击。

时序攻击是一种基于研究操作发生所需的时间长度来获取本受保护内容信息的方法。例如，如果红色像素的绘制时间比绿色像素长，那么在从未访问过元素内容的情况下，就可能重构出正在渲染的元素的大致图像。

<mask-source> 和 <clip-source> 在获取资源时有特殊要求。

用户代理必须对 mask-image、mask-border-source 和 clip-path 属性上的所有 <mask-source>、<clip-source> 和 <image> 值，使用 [FETCH] 规范中定义的 潜在 CORS 支持的 fetch 方法。在获取时，用户代理必须使用“匿名（Anonymous）”模式，将引用源（referrer source）设置为样式表的 URL，并将来源（origin）设置为包含文档的 URL。如果这导致网络错误，其效果就如同指定了 none 值一样。

附录 A：已弃用的 clip 属性

在本规范中，clip 属性已被弃用。建议作者改用 clip-path 属性。用户代理必须支持 clip 属性。

clip 属性仅适用于绝对定位元素。在 SVG 中，它适用于 建立新视口的元素、pattern 元素和 mask 元素。值的含义如下：

auto

元素不进行裁剪。

rect() = rect( <top>, <right>, <bottom>, <left> )

<top> 和 <bottom> 指定从盒子顶部边框边缘的偏移量，而 <right> 和 <left> 指定从盒子左侧边框边缘的偏移量。作者应使用逗号分隔偏移值。用户代理必须支持用逗号分隔，但也可能支持不使用逗号的格式（但不支持混合使用），因为本规范的早期版本在这方面存在歧义。

<top>、<right>、<bottom> 和 <left> 可以具有 <length> 值或 auto。允许使用负长度。auto 值意味着裁剪区域的给定边缘将与元素生成的边框盒边缘相同（即，对于 <top> 和 <left>，auto 的含义与 0 相同；对于 <bottom>，其含义与高度的 使用值 加上垂直填充和边框宽度之和相同；对于 <right>，其含义与宽度的使用值加上水平填充和边框宽度之和相同，使得四个 auto 值会导致裁剪区域与元素的边框盒相同）。

当坐标被舍入到像素坐标时，应注意确保当 <left> 和 <right> 具有相同值（或 <top> 和 <bottom> 具有相同值）时，不会有像素保持可见；反之，当这些值为 auto 时，确保元素边框盒内的像素不会被隐藏。

clip 属性是 SVG 元素的 表现属性。

示例：以下两条规则

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

并假设两个 P 元素均为 50 x 55 像素，将分别创建由以下插图中的虚线所界定的矩形裁剪区域

此图说明了两个块级盒子，一个并排着另一个，具有不同尺寸的矩形裁剪区域。（参见 详细描述。）

附录 B：计算描边边界盒

计算 描边边界盒（stroke bounding box） 的算法如下，具体取决于 element 的类型

一个没有 use 或 image 的 图形元素

具有 文本内容元素 的 a 元素

1. 令 box 为初始化为 element 的 对象边界盒 的矩形。

2. 如果 stroke-width 的 使用值 <= 0，或者 stroke 的使用值为 none，则返回 box。

3. 令 delta 为初始化为 stroke-width 一半的膨胀值。

4. 如果 element 不是 rect、ellipse、circle 或 image，则按适用顺序遵循以下条件之一

   stroke-linejoin 的使用值为 miter

   1. 令 miter 为 stroke-miterlimit 的使用值。

   2. 如果 miter 小于 2 的平方根，且 stroke-linecap 的使用值为 square，则将 delta 乘以 2 的平方根。否则，将 delta 乘以 miter。

   stroke-linecap 的使用值为 square

   1. 将 delta 乘以 2 的平方根。

5. 使用 delta 的值膨胀 box。

6. 返回 box。

注意：stroke-opacity、stroke-dasharray 和 stroke-dashoffset 的值不会影响描边边界盒的计算。

一个 容器元素

use

1. 令 parent 为容器元素（如果是的话），否则为 use 元素的影子树（shadow tree）根节点。

2. 对于 parent 的每个子元素 child

   1. 调用带有 child 的描边边界盒算法。

   2. 令 childBox 为所调用算法返回的盒值。

   3. 将 childBox 从 child 的坐标空间映射到 parent 的坐标空间。

3. 令 box 为所有 childBox 的并集。

4. 返回 box。

image

1. 返回 element 的 对象边界盒。

注意：SVG 规范的未来版本可能会覆盖此章节。

附录 C：DOM 接口

Interface SVGClipPathElement

SVGClipPathElement 接口对应 clipPath 元素。

[Exposed=Window]
interface SVGClipPathElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration clipPathUnits;
  readonly attribute SVGAnimatedTransformList transform;
};

Interface SVGMaskElement

SVGMaskElement 接口对应 mask 元素。

[Exposed=Window]
interface SVGMaskElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
};

自上次发布以来的变更

自 2014 年 8 月 26 日的候选推荐标准（Candidate Recommendation）以来，进行了以下更改。

• 允许 mask 简写中的 <'mask-mode'> 值出现在除 <'mask-position'> 和 <'mask-size'> 之间的任何位置。

• 移除了 clipPath 和 mask 元素上的 Implements SVGUnitTypes。

• 将适用于所有图形元素的属性也应用于 use 元素。

• 将 mask-position 的初始值更改为 0% 0%，将 mask-repeat 的初始值更改为 repeat。

• 从 mask-origin 和 mask-clip 的可能值中移除了 margin-box。

• 澄清 mask-clip 对引用了 mask 元素的 遮罩层图像 没有影响。

• 澄清了 mask 简写在出现一个 <geometry-box> 和 no-clip 关键字时的行为。

• 在作为对 mask 元素引用的 遮罩层图像 上，值为 match-source 的 mask-mode 应采用该 mask 元素上 mask-type 属性的值。

• 具有和没有关联 CSS 布局盒子的 SVG 元素的盒子映射已更改，以匹配 Fill and Stroke 规范中的映射。

• 编辑性修改。

自 2014 年 5 月 22 日的工作草案（Working Draft）以来，进行了以下更改。

• 将 mask-size 的初始值从 border-box 更改为 auto。

自 2014 年 2 月 13 日的工作草案以来，进行了以下更改。

• 将 mask-box* 属性和术语重命名为 mask-border*。

• 增加了对多个遮罩层的支持。（类似于 background 的多个背景层。）

• 增加了 mask-composite 属性，用于通过关键字 add、subtract、intersect 和 exclude 来控制多个 遮罩层图像 的合成。

• 没有关键字 fill 的 mask-border-slice 不再裁剪内容的中间部分。初始值从 0 fill 更改为 0。

• 改进了对 clip-rule、mask-mode 和 mask-type 的描述。

• 将 fill 和 stroke 关键字重命名为 fill-box 和 stroke-box。

• 增加了 描边边界盒 的定义。

• 更好地区分了遮罩图像：遮罩层图像 和 遮罩边框图像。

自 2013 年 10 月 29 日的最后通牒工作草案（Last Call Working Draft）以来，进行了以下更改。

• 移除了关于未来版本规范将允许控制裁剪点击测试（hit testing）的说明。

• 更改了文档中章节的顺序。

• 明确指出，属性 mask-image、mask-repeat、mask-position、mask-clip、mask-origin 和 mask-size 的 使用值 必须被忽略，针对的是 <mask-source>，而不是属性本身。

• mask-size 和 mask-position 的“可动画化”部分被描述为列表的列表。已更改为单个列表。

• mask-repeat 和 mask-position 的计算值曾被描述为列表项。已更改为仅具有一个值。

• 将 ED 链接从 https://drafts.fxtf.org/masking/ 更改为 https://drafts.fxtf.org/css-masking-1/

自 2013 年 6 月 20 日的工作草案以来，进行了以下重要更改。

• mask 重置 mask-box 属性。

• mask-repeat、mask-position 和 mask-origin 的初始值分别更改为 no-repeat、center 和 border-box。

• 多个遮罩层图像的支持被推迟到本规范的未来级别。

• 增加了用于像素操作以及遮罩和裁剪资源获取的安全模型。

• 将“child”和 select() 函数推迟到下一级别。

自 2012 年 11 月 15 日的工作草案以来，进行了以下重要更改。

• 更好地与 CSS 背景和边框模块的术语和定义进行了集成。

• mask 简写属性的语法更改，以符合 background 简写属性。

• 定义了实现如何在 SVG 资源（mask、clipPath）和图像资源之间进行区分。

• 增加了 mask-mode 属性，以在 mask-image 上切换亮度遮罩和 Alpha 遮罩。

• 将 SVGMaskElement 和 SVGClipPathElement 的 IDL 定义改编为 WebIDL。

• 其他编辑更改。

请参阅 ChangeLog 中的详细变更列表。

致谢

感谢 Elika J. Etemad、Cameron McCormack、Liam R. E. Quin、Björn Höhrmann、Alan Stearns、Jarek Foksa、David Baron、Boris Zbarsky、Markus Stange 和 Sara Soueidan 的仔细评审、意见和更正。特别感谢 CJ Gammon 提供的图形资源。