<mask>
======

The **`<mask>`** element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the `mask (en-US)` property.
```

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



```html
<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <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" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>
```

属性
--

`height (en-US)`

 This attribute defines the height of the masking area.
 *Value type*: **<length>** ; *Default value*: `120%`; *Animatable*: **yes**

`maskContentUnits (en-US)`

 This attribute defines the coordinate system for the contents of the `<mask>`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `userSpaceOnUse`; *Animatable*: **yes**

`maskUnits (en-US)`

 This attribute defines defines the coordinate system for attributes `x`, `y`, `width (en-US)` and `height (en-US)` on the `<mask>`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`x`

 This attribute defines the x-axis coordinate of the top-left corner of the masking area.
 *Value type*: **<coordinate>** ; *Default value*: `-10%`; *Animatable*: **yes**

`y`

 This attribute defines the y-axis coordinate of the top-left corner of the masking area.
 *Value type*: **<coordinate>** ; *Default value*: `-10%`; *Animatable*: **yes**

`width (en-US)`

 This attribute defines the width of the masking area.
 *Value type*: **<length>** ; *Default value*: `120%`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class (en-US)`, `style (en-US)`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

Usage notes
-----------

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

仕様
--

| Specification |
| --- |
| CSS Masking Module Level 1 # MaskElement |

ブラウザの互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

あわせて参照
------

* Other clipping and masking SVG elements: `<clipPath>`
* Clipping and masking CSS properties: `mask`, `mask-image`,`mask-mode`, `mask-repeat`, `mask-position`, `mask-clip`, `mask-origin`, `mask-composite`, `mask-size`, `pointer-events`