svg之mask遮罩

马黑黑 · 发表于 2024-10-27 11:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-10-27 12:00 编辑

svg遮罩通过mask标签实现，该标签将创建一个遮罩层，层内建立由svg元素或渐变或其他合法的内容单独或多个组合而成的形状或形态，用以遮罩目标元素。例如，mask标签创建一个圆形图案得到的遮罩层就是一个圆，这个圆形遮罩层拿去作用于宽高大于等于圆的直径的矩形，矩形将不再是矩形，它只呈现出圆形的图案，该图案就是遮罩层的形状，颜色也可能发生变化——一切依据遮罩层的形状、色彩等状况。关于遮罩层的颜色，有一条重要的规则需要特别留意：白色被视为全不透明，黑色被视为全透明；用不透明（即白色）的遮罩层去遮罩目标对象，目标对象将呈现遮罩层的形状，反之，用透明（即黑色）去作用于目标对象，目标对象将不能呈现，而黑白之间的颜色通通视为中间色，中间色遮罩层作用下的目标对象会呈现但自身颜色会被改变。

下面的效果，左边的圆和矩形中心重叠，圆的直径和矩形宽高相等。右边原本是左边图案的克隆，但使用了mask遮罩：圆放在mask遮罩层里做遮罩形状，矩形是被遮罩的对象：

参考代码：

可以看到：右边的矩形因为使用了遮罩，其形状和颜色都发生了变化。

mask标签除了必须的id属性，还有其他几个常规属性，x、y、width、height。不同于多数其他标签的相同属性，mask标签使用这些属性时一般用百分比，其中x、y缺省值各为 -10%，width、height缺省值各为 120%，这个知识点鲜为人知。下例我们依然使用圆形图案做遮罩层，作用在矩形上，请注意比对mask标签的x、y、width、height对被遮罩矩形的影响（绿色边框是只有描边的同尺寸矩形，做参照用）：

参考代码：

此外，mask标签还有 ① maskUnits 用来指定坐标系，缺省默认值是 objectBoundingBox 即svg默认坐标系，可选值 userSpaceOnUse 即用户空间坐标系；② maskContentUnits 属性的规范和可选值和 maskUnits 一样，不同的是所设定的坐标系基于即作用于mask标签内部元素。

mask定义的遮罩层支持复用，但需要做一些目标对象位置的处理，例如目标对象应设置好能够受用遮罩层的位置，然后再用位移方式移开一定距离。最后给出的示例用来演示遮罩层的复用方法：我们在svg中设计一个用图片做的蒙版，然后分别应用于svg的两个矩形，第一个矩形用绿色填充，第二个矩形用红色填充，位置与绿色矩形一样，但随后使用了 transform 属性平移（translate）到右半部：

参考代码：

（注：本文的svg绘制均由 svgdr 插件实时实现，参考代码的生成也由插件实时输出）