SVG mask Attribute
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:
Please Login to comment...