<mask>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

使用上のメモ

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

属性

height: この属性はマスク領域の高さを定義します。 値の型: <length>; デフォルト値: 120%; アニメーション: 可
mask-type: この属性は <mask> のコンテンツのマスクモードを定義します。 値の型: alpha | luminance; デフォルト値: luminance; アニメーション: 可
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%; アニメーション: 可

DOM インターフェイス

この要素は SVGMaskElement インターフェイスを実装しています。

例

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" mask-type="luminance">
    <!-- 白いピクセルの下はすべて表示される -->
    <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>