<mask>

Usage context

Categories	Container element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Attributes

height: This attribute defines the height of the masking area. Value type: <length>; Default value: 120%; Animatable: yes
mask-type: This attribute defines the mask mode for the contents for the contents of the <mask>. Value type: alpha | luminance; Default value: luminance; Animatable: yes
maskContentUnits: This attribute defines the coordinate system for the contents of the <mask>. Value type: userSpaceOnUse | objectBoundingBox; Default value: userSpaceOnUse; Animatable: yes
maskUnits: This attribute defines the coordinate system for attributes x, y, width and height 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: This attribute defines the width of the masking area. Value type: <length>; Default value: 120%; Animatable: yes

DOM Interface

This element implements the SVGMaskElement interface.

Example

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"> <!-- 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" fill="purple" mask="url(#myMask)" /> </svg>