SVG mask Attribute
Last Updated :
31 Mar, 2022
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"
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...