Open In App

SVG mask Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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

or

mask = Image values

or

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>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads