SVG <máscara> Elemento – Barcelona Geeks

El elemento <mask> define la transparencia y visibilidad del objeto de entrada. Aplica una máscara al objeto de entrada. Muestra las partes seleccionadas de un elemento o una imagen en la pantalla mientras oculta el resto. SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.

Sintaxis:

<mask> Contents... </mask>

Atributos:

x, y — Define las coordenadas de los ejes x e y en el sistema de coordenadas del usuario.
ancho : el ancho del objeto extranjero.
altura — La altura del objeto extranjero.
maskUnits : tiene dos valores userSpaceOnUse/objectBoundingBox. El valor predeterminado es objectBoundingBox. Las coordenadas de x, y, ancho y alto están definidas por unidades de máscara.
maskContentUnits : tiene dos valores userSpaceOnUse/objectBoundingBox. El valor predeterminado es objectBoundingBox. Las coordenadas del contenido secundario de la máscara están definidas por maskUnits.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="400">
        <defs>
            <mask id="mask" x="0" y="0" 
                width="200" height="200">
  
                <rect x="0" y="0" width="250" 
                    height="50" fill="lightgreen" />
  
                <rect x="0" y="50" width="350" 
                    height="50" fill="green" />
            </mask>
        </defs>
  
        <text x="25" y="55" style=
            "stroke: none; fill: #000000;">
            GeeksForGeeks
        </text>
  
        <rect x="1" y="1" width="150" height="200"
            style="stroke: none; fill: green; 
                mask: url(#mask)" />
    </svg>
</body>
  
</html>

Producción :

Nota: El texto solo es visible donde la máscara es transparente.

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="400">
        <defs>
            <pattern id="pattern" x="10" y="10" 
                width="20" height="20" 
                patternUnits="userSpaceOnUse">
  
                <circle cx="5" cy="5" r="5" 
                    style="stroke: none; fill: red" />
            </pattern>
  
            <mask id="mask" x="0" y="0" 
                width="200" height="100">
  
                <rect x="0" y="0" width="200" 
                    height="100" style="stroke:none; 
                    fill: url(#pattern)" />
            </mask>
        </defs>
  
        <text x="28" y="55" style=
            "stroke: none; fill: #000000;">
            GeeksForGeeks
        </text>
  
        <rect x="2" y="2" width="150" height="200" 
            style="stroke: none; fill: green; 
            mask: url(#mask)" />
    </svg>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta