Firefox Tomorrow

svg element

<mask>

View on MDN ↗

The <mask> SVG element defines a mask for compositing the current object into the background. A mask is used/referenced using the mask property and CSS mask-image property.

Usage context

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

<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>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also