<mask>

In SVG, you can specify that any other graphics object or <g> element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the <mask> element. A mask is used/referenced using the mask property.

Usage context

Attributes

Global attributes

• Conditional processing attributes »
• Core attributes »
• Presentation attributes »
• class
• style
• externalResourcesRequired

Specific attributes

• maskUnits
• maskContentUnits
• x
• y
• width
• height

DOM Interface

This element implements the SVGMaskElement interface.

Example

SVG

<?xml version="1.0"?>
<svg width="200" height="80" viewBox="0 0 200 80" version="1.1"
    xmlns="https://www.w3.org/2000/svg" 
    xmlns:xlink="https://www.w3.org/1999/xlink">

  <defs>
    <mask id="myMask" maskUnits="userSpaceOnUse"
        x="0" y="0" width="200" height="80">
      <rect x="0" y="0" width="100" height="80" fill="white"/>
    </mask>

    <text id="Text" x="100" y="48" font-size="26" font-weight="bold"
        text-anchor="middle">
      Black & White
    </text>
  </defs>

  <!-- Draw black rectangle in the background -->
  <rect x="100" y="10" width="95" height="60" />
  
  <!-- Draw the text string twice. First, the white text without mask.
       Second, the black text with the mask applied-->
  <use xlink:href="#Text" fill="white"/>
  <use xlink:href="#Text" fill="black" mask="url(#myMask)"/>
</svg>

Result

Specifications

Browser compatibility

See also

• <clipPath>