SVG 剪切和蒙版

SVG 剪切和蒙版

SVG 元素可以剪切和蒙版。

<clipPath> 元素用于剪切 SVG 元素。

<mask> 元素用于将蒙版应用于 SVG 元素。

SVG 剪切

剪切是指从元素中删除一部分。

对于剪切，我们使用 <clipPath> 元素。

在 <clipPath> 元素内的每个路径/元素都会被检查和评估。然后，目标中位于此区域之外的所有部分将不会被渲染。换句话说：路径之外的所有内容都将被隐藏，路径内部的所有内容都将被显示！

<clipPath> 元素通常放在 <defs> 部分中。

让我们看一些示例

在这个示例中，我们创建了一个以 (50,50) 为中心，半径为 50 的红色圆形。

这是 SVG 代码

现在我们添加一个 <clipPath> 元素，其中包含一个 <rect> 元素。这个 <rect> 元素将覆盖圆形的上半部分。该 <rect> 将不会被绘制；相反，它的尺寸和位置将用于确定将显示圆形的哪些像素。由于矩形只覆盖了圆形的上半部分，因此圆形的下半部分将消失。

这是 SVG 代码

SVG 蒙版

对于蒙版，我们使用 <mask> 元素。

<mask> 元素用于将蒙版应用于 SVG 元素。

蒙版使用 mask 属性引用。

这是一个简单的蒙版示例

这是 SVG 代码

上面的示例定义了一个蒙版，其 id="mask1"。在 <mask> 元素内，有一个 <rect> 元素。这个 <rect> 元素定义了蒙版的形状。

该示例还定义了一个 <rect> 元素，该元素使用蒙版。蒙版使用 mask 属性引用。

红色矩形的高度应为 100 像素，但只有前 50 个像素垂直可见。这是因为蒙版矩形的高度只有 50 像素。矩形仅在被蒙版矩形覆盖的部分可见。

最后一个 <rect> 元素只是为了显示没有蒙版的矩形大小。

这里还有另一个使用 <circle> 元素来定义蒙版形状的示例

这是 SVG 代码

填充颜色和不透明度

<mask> 元素内部的元素的填充颜色定义了引用蒙版的元素的填充颜色的不透明度。

在上面的示例中，我们只使用了 fill="white"。在蒙版中，白色被视为将要显示的区域，黑色被视为要蒙版的区域。

蒙版越接近 #ffffff (白色) 就越不透明，越接近 #000000 (黑色) 就越透明。

这是 SVG 代码

蒙版中的渐变

在这个示例中，蒙版形状使用渐变作为填充颜色。

这是 SVG 代码