<mask>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

<mask> 要素は、現在のオブジェクトを背景に合成するためのアルファマスクを定義します。マスクは mask プロパティを使用して使用/参照します。

例

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

html

<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask">
    <!-- 白いピクセルの下はすべて表示される -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- 黒いピクセルの下はすべて見えなくなる -->
    <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" />

  <!-- このマスクを適用した状態で、ハートの図形の穴を円に「パンチ」する -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>

属性

height: この属性はマスク領域の高さを定義します。 値の型: <length> ; 既定値: 120%; アニメーション: 可
maskContentUnits: この属性は <mask> のコンテンツの座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox ; 既定値: userSpaceOnUse; アニメーション: 可
maskUnits: この属性は <mask> の属性 x, y, width, height の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox ; 既定値: objectBoundingBox; アニメーション: 可
x: この属性は、マスク領域の左上隅の x 軸座標を定義します。 値の型: <coordinate> ; 既定値: -10%; アニメーション: 可
y: この属性は、マスク領域の左上隅の y 軸座標を定義します。 値の型: <coordinate> ; 既定値: -10%; アニメーション: 可
width: この属性はマスク領域の幅を定義します。 値の型: <length> ; 既定値: 120%; アニメーション: 可

使用上のメモ

カテゴリー	コンテナー要素
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素 `<a>`、`<clipPath>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`

仕様書

Specification
CSS Masking Module Level 1 # MaskElement

<mask>

例

属性

使用上のメモ

仕様書

ブラウザーの互換性

関連情報