SVG 剪裁与遮罩

SVG 剪裁与遮罩

SVG 元素可以被剪裁和遮罩。

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

<mask> 元素用于对 SVG 元素应用遮罩。

SVG 剪裁

剪裁是从元素中移除一部分。

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

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

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

我们来看一些例子

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

这是 SVG 代码

现在我们添加一个带有单个 <rect> 元素的 <clipPath> 元素。这个 <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 代码