Атрибут маски 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" 
             xmlns="http://www.w3.org/2000/svg">
            <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>

Выход:

HTML

Атрибут маски SVG

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ