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...