Atributo de máscara SVG – Barcelona Geeks

El atributo de máscara SVG se utiliza para vincular un elemento en el que este atributo está definido con el elemento <mask> dado . Tiene efecto sobre todo en los siguientes elementos. <a>, <círculo>, <clipPath>, <elipse>, <g>, <glifo>, <imagen>, <línea>, <marcador>, <máscara>, <ruta>, <patrón>, <polígono >, <polilínea>, <rect>, <svg>, <símbolo>, <texto> y <uso>.

Sintaxis:

mask = Keyword values

mask = Image values

mask = Global values

Valores de atributo: el atributo de máscara se puede utilizar con los siguientes elementos.

Valores de palabras clave: este valor de atributo incluye valores como none .
Valores de imagen: este valor de atributo utiliza una imagen de píxel o un elemento dentro del gráfico SVG utilizado como máscara.
Valores globales: este valor de atributo incluye valores como legacy, initial y unset .

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

Producción:

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

Producción:

Publicación traducida automáticamente

Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta