<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 プロパティを使用して使用/参照します。

例

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>`、`<filter>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`