mask

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Thuộc tính mask là một presentation attribute chủ yếu được dùng để liên kết một phần tử <mask> cho trước với phần tử mà thuộc tính này thuộc về.

Note: Với vai trò là một presentation attribute, mask cũng có thuộc tính CSS tương ứng: mask. Khi cả hai đều được chỉ định, thuộc tính CSS sẽ được ưu tiên.

Bạn có thể dùng thuộc tính này với các phần tử SVG sau:

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
    <polygon
      fill="black"
      points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
  </mask>

  <!--
  Punch a hole in a shape of a star inside the red circle,
  revealing the yellow circle underneath
  -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red" mask="url(#myMask)" />
</svg>

Kể từ SVG2, thuộc tính mask được định nghĩa là một thuộc tính CSS và là shorthand cho nhiều thuộc tính khác: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, và mask-composite.