<mask>

The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.

Example

html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <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" fill="purple" mask="url(#myMask)" />
</svg>

Attributes

height

This attribute defines the height of the masking area. Value type: <length> ; Default value: 120%; 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

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>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Specifications

Specification
CSS Masking Module Level 1
# MaskElement

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
mask 1 12 3 15 3 18 4 14 2 1.0 4.4
height 1 12 3 15 3 18 4 14 2 1.0 4.4
maskContentUnits 1 79 3 15 3 18 4 14 2 1.0 4.4
maskUnits 1 79 3 15 3 18 4 14 2 1.0 4.4
systemLanguage 1 12 12 15 3 18 14 14 2 1.0 4.4
width 1 12 3 15 3 18 4 14 2 1.0 4.4
x 1 12 3 15 3 18 4 14 2 1.0 4.4
y 1 12 3 15 3 18 4 14 2 1.0 4.4

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask