<mask>

<mask> 元素定义了一个用于将当前对象合成到背景中的 Alpha 遮罩。可以使用/引用 mask 属性来使用/引用遮罩。

示例

html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>

属性

height

此属性定义了遮罩区域的高度。值类型<length>默认值120%可动画

maskContentUnits

此属性定义了<mask>内容的坐标系。值类型userSpaceOnUse|objectBoundingBox默认值userSpaceOnUse可动画

maskUnits

此属性定义了<mask>xywidthheight属性的坐标系。值类型userSpaceOnUse|objectBoundingBox默认值objectBoundingBox可动画

x

此属性定义了遮罩区域左上角的 x 轴坐标。值类型<coordinate>默认值-10%可动画

y

此属性定义了遮罩区域左上角的 y 轴坐标。值类型<coordinate>默认值-10%可动画

width

此属性定义了遮罩区域的宽度。值类型<length>默认值120%可动画

使用上下文

规范

规范
CSS 遮罩模块级别 1
# MaskElement

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅