<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% }

<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 (en-US), visibility (en-US)

許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a> 、 <altGlyphDef> (en-US) 、 <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)

カテゴリー	コンテナー要素
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素 `<a>` 、 `<altGlyphDef>` (en-US) 、 `<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)