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