<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.

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

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask
height
maskContentUnits
maskUnits
systemLanguage
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報