SVG 基本知识:蒙版 (mask) 详解

蒙版（mask）是一种用于控制SVG元素可见性的技术。它通过将一个元素的可见部分与另一个元素进行组合来创建一个遮罩效果。蒙版通常由一个包含与被遮罩元素相同尺寸和位置的图形元素和一个填充满颜色的图形组成。

蒙版元素有两个核心属性：maskUnits和maskContentUnits。maskUnits属性定义了蒙版元素的坐标系，可以是用户空间坐标系统（默认）或对象BoundingBox坐标系统。maskContentUnits属性定义了蒙版元素图形的坐标系统，与maskUnits属性类似，默认也是用户空间坐标系统。

蒙版的创建和使用包括以下步骤：

1. 创建一个蒙版元素，可以使用<mask>标签来创建，然后在其中添加图形元素来定义蒙版的形状。

<mask id="myMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="50" fill="white" />
</mask>

2. 将蒙版应用到需要遮罩的元素上，使用mask属性来指定蒙版的ID。

<rect x="0" y="0" width="100" height="100" fill="red" mask="url(#myMask)" />

在上面的例子中，一个蒙版元素被创建并定义为一个白色的圆形，然后这个蒙版被应用到一个红色的矩形上。

蒙版元素的图形可以是任意形状，可以是一个单独的形状，也可以是多个形状的组合。蒙版元素的图形可以使用任意的SVG图形元素来创建，如矩形、圆形、路径等等。

蒙版还可以通过添加渐变效果、图案或文本等来实现更加复杂的遮罩效果。可以使用<linearGradient>和<radialGradient>元素来创建渐变效果，使用<pattern>元素来创建图案，使用<text>元素来添加文本。

总而言之，蒙版是一个强大的SVG技术，可以用于创建各种遮罩效果，从简单的形状遮罩到复杂的渐变遮罩和图案遮罩。通过合理运用蒙版，可以实现各种独特的视觉效果。