Атрибут маски SVG
Опубликовано: 25 Февраля, 2022
Атрибут маски SVG используется для привязки элемента, в котором этот атрибут определен, к заданному элементу <mask>. В основном это влияет на следующие элементы. <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon >, <polyline>, <rect>, <svg>, <symbol>, <text> и <use>.
Синтаксис:
mask = Значения ключевого слова
или
mask = Значения изображения
или
маска = Глобальные значения
Значения атрибутов: атрибут маски можно использовать со следующими элементами.
- Значения ключевых слов: это значение атрибута включает такие значения, как none .
- Значения изображения: в этом значении атрибута используется пиксельное изображение или элемент в SVG-графике, используемый в качестве маски.
- Глобальные значения: это значение атрибута включает такие значения, как наследование, начальное и неустановленное .
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 > |
Выход:
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 > |
Выход: