SVG 遮罩属性

SVG（Scalable Vector Graphics）是一种基于 XML 的图形格式，它可以用于创建矢量图形和动画。SVG 中的遮罩属性可以通过创建透明度蒙层，制作复杂的切割和遮罩效果。

基本语法

<svg width="100" height="100">
  <defs>
    <mask id="mask">
      <!-- 内部为遮罩形状 -->
    </mask>
  </defs>
  <!-- 遮罩的元素需加上 mask 属性，指向 mask 的 id -->
  <circle cx="50" cy="50" r="40" fill="red" mask="url(#mask)"/>
</svg>

实现透明度遮罩

<svg width="100" height="100">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="white" />
      <circle cx="50" cy="50" r="20" fill="black" />
    </mask>
  </defs>
  <rect width="100" height="100" fill="green" mask="url(#mask)" />
</svg>

上述代码中，<rect> 元素填充了绿色，<mask> 定义了以 <rect> 和 <circle> 为边界的透明区域，其中，<rect> 的填充色为白色，<circle> 的填充色为黑色。

实现切割效果

<svg width="100" height="100">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="white" />
      <circle cx="50" cy="50" r="25" fill="black" />
    </mask>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="green" mask="url(#mask)" />
</svg>

修改遮罩形状的大小，可获得更为复杂的切割效果。

总结

SVG 的遮罩属性通过创建透明度蒙层和复杂的形状，可以制作出丰富的切割和遮罩效果。在实际开发中，可以利用遮罩属性，实现各种复杂的视觉效果。