The <mask> element defines the transparency and visibility of the input object. It applies a mask to the input object. It displays the selected portions of an element or an image on the screen while hiding the rest. SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
Syntax :
<mask> Contents... </mask>
Attributes:
- x, y — It defines the x and y- axis coordinate in the user coordinate system.
- width — The width of the foreignObject.
- height — The height of the foreignObject.
- maskUnits — It has two values userSpaceOnUse/objectBoundingBox. Default value is objectBoundingBox. The coordinates of x, y, width and height are defined by maskUnits.
- maskContentUnits — It has two values userSpaceOnUse/objectBoundingBox. Default value is objectBoundingBox. The coordinates of child content of the mask are defined by maskUnits.
Example 1:
HTML
<!DOCTYPE html> <html>
<body>
<svg width="400" height="400">
<defs>
<mask id="mask" x="0" y="0" width="200" height="200">
<rect x="0" y="0" width="250" height="50" fill="lightgreen" />
<rect x="0" y="50" width="350" height="50" fill="green" />
</mask>
</defs>
<text x="25" y="55" style=
"stroke: none; fill: #000000;">
GeeksForGeeks
</text>
<rect x="1" y="1" width="150" height="200"
style="stroke: none; fill: green;
mask: url(#mask)" />
</svg>
</body>
</html>
|
Output :
Note: The text is only visible where the mask is transparent.
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<svg width="400" height="400">
<defs>
<pattern id="pattern" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="5" style="stroke: none; fill: red" />
</pattern>
<mask id="mask" x="0" y="0" width="200" height="100">
<rect x="0" y="0" width="200" height="100" style="stroke:none;
fill: url(#pattern)" />
</mask>
</defs>
<text x="28" y="55" style=
"stroke: none; fill: #000000;">
GeeksForGeeks
</text>
<rect x="2" y="2" width="150" height="200" style="stroke: none; fill: green;
mask: url(#mask)" />
</svg>
</body>
</html>
|
Output: