SVG <feConvolveMatrix> Elemento

SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.

La primitiva de filtro SVG <feConvolveMatrix> cambia píxeles en la imagen de entrada con píxeles vecinos para producir una imagen resultante.

Sintaxis:

<feConvolveMatrix in="" order="" kernelMatrix="" divisor="" 
    bias="" targetX="" targetY="" edgeMode="" kernelUnitLength=""
    preserveAlpha="" />

Atributos:

in : almacena la entrada para la primitiva dada.
order – Prueba el tamaño de la array que utilizará el elemento filtrante. Por defecto, es 3 X 3.
kernelMatrix : define la lista de números que forman la array del kernel.
divisor – Define la suma de valores de la array kernel. De forma predeterminada, se establece en 1 .
bias – Establece el rango del filtro. De forma predeterminada, se establece en 0.
targetX : desplaza la array de convolución horizontalmente. ( Rango – 0 <= objetivoX <ordenX).
targetY – Desplaza la array de convolución verticalmente. ( Rango – 0 <= targetY <orderY).
kernelUnitLength : indica la distancia prevista entre columnas y filas sucesivas en kernelMatrix. La distancia prevista se representa en unidades de filtro actuales. El valor predeterminado es 1.
preserveAlpha : su valor es verdadero o falso. Indica si la convolución solo se aplicará a los canales alfa y de color. El valor predeterminado es falso.

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<body>
    <svg width="100%" height="220">
        <defs>
            <filter id="convolve">
                <feConvolveMatrix kernelMatrix=
                    "1 5 -1 -1 0 4 0 0 -1" />
            </filter>
        </defs>
  
        <rect x="40" y="40" width="100" 
            height="100" 
            filter: url(#convolve) style=
                "stroke: #000000;
                fill: darkgreen;" />
  
        <g fill="#FFFFFF" stroke="black" 
            font-size="10" font-family="Verdana">
  
            <text x="50" y="90" 
                filter="url(#convolve)">
                GeeksForGeeks
            </text>
        </g>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html>
<html>
<title>SVG Filter</title>
  
<body>
    <svg width="100%" height="220">
        <defs>
            <filter id="convolve">
                <feConvolveMatrix kernelMatrix
                ="-7 -10 -15 -10 10 -1 0 0 -1" />
            </filter>
        </defs>
  
        <rect x="1" y="1" width="198" 
            height="118" 
            style="stroke: #000000; 
                    fill: none;
                    filter: url(#convolve);" />
  
        <circle cx="100" cy="60" r="55" 
            stroke="black" stroke-width="3" 
            fill="Lightgreen" 
            filter: url(#convolve) />
  
        <g fill="#FFFFFF" stroke="black" 
            font-size="10" font-family="Verdana">
            <text x="60" y="62" filter="url(#convolve)">
                GeeksForGeeks</text>
        </g>
    </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

Deja una respuesta Cancelar la respuesta