SVG mask Attribute

Last Updated : 09 Dec, 2020

The SVG mask attribute is used to bind an element in which this attribute is defined to with the given <mask> element. It has effect mostly on the following elements. <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, and <use>.

Syntax:

mask = Keyword values

mask = Image values

mask = Global values

Attribute values: The mask attribute can be used with the following elements.

Keyword values: This attribute value includes values like none.
Image values: This attribute value uses pixel image or element within SVG graphic used as mask.
Global values: This attribute value includes values like inherit, initial, and unset.

Example 1:

HTML

<!DOCTYPE html>  
<html> 
    
    <body>  
        <h1 style="color: green;
            font-size: 25px;
            margin-left: -3px;">
            GeeksforGeeks
        </h1>
        <svg viewBox="0 0 600 100" 
             xmlns="http://www.w3.org/2000/svg">
            <mask maskContentUnits="objectBoundingBox"
                  id="geek">
              <rect fill="white" x="0" y="0" 
                  width="100%" height="100%" />
              <polygon fill="black" 
                  points="0.5, 0.2 0.68, 0.74 0.21,
                  0.41 0.79, 0.41 0.32, 0.74"/>
            </mask>
            <rect  fill="green" x="0" y="0" 
                  width="15%" height="90%" 
                  mask="url(#geek)"/>
        </svg>
    </body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>  
<html> 
    
    <body>  
        <h1 style="color: green;
            font-size: 25px;
            margin-left: -3px;">
            GeeksforGeeks
        </h1>
  
        <svg>
            <defs>
                <linearGradient id="geek"
                    x1="0%"   y1="0%"
                    x2="100%" y2="0%"
                    spreadMethod="reflect">
                   <stop offset="10%"  
                    stop-color="yellow" 
                    stop-opacity="1"/>
                   <stop offset="100%" 
                    stop-color="#000000" 
                    stop-opacity="1"/>
                </linearGradient>
              
                <mask id="geeky" 
                     x="0" y="0" 
                     width="200" 
                     height="100">
                    <rect x="0" y="0"  
                     width="200" 
                     height="100"
                     style="fill:url(#geek)"/>
                </mask>
            </defs>
  
            <text x="30" y="55" 
                style="fill: black;">
                GeeksforGeeks
            </text>
  
            <rect x="1" y="1" 
                width="200" 
                height="100"
                style="stroke: none; 
                fill: green; 
                mask: url(#geeky)"/>
        </svg>
    </body> 
  
</html>