<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

ブラウザーの互換性

BCD tables only load in the browser

関連情報