SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento de filtro SVG <feColorMatrix> cambia los colores en función de una transformación de color mediante una array de valores de color y otras operaciones como luminancia a alfa, saturar, array y hueRotate. puede cambiar la saturación del color, realizar rotaciones de tono, ajustar selectivamente los valores alfa de canales particulares, ajustar el contraste y el brillo y más, como editar con Photoshop.
Sintaxis:
<filter>
<feColorMatrix in="attributes" type="" values="" />
</filter>
Atributos:
- Atributos globales: algunos atributos globales se utilizan como atributos principales y atributos de estilo, etc.
- Atributos específicos: se utiliza para cambiar los atributos de entrada, tipo y valores.
El elemento <feColorMatrix> le permite cambiar los valores de color de forma muy generalizada.
mejor visualización del valor de la array
El elemento <feColorMatrix> es otra de las primitivas de filtro comunes. Viene en cuatro tipos de variaciones, cada una de las cuales tiene un requisito de valores diferente:
- type=”luminanceToAlpha”: Ayuda a convertir colores a grados de transparencia.
Ejemplo:
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic"
type="luminanceToAlpha"
values="0.2" />
</filter>
- type=”saturate”: Aumenta y disminuye la saturación conservando la luminancia.
- > el valor es un número positivo donde 1 significa que no hay cambios y los valores superiores a 1 aumentan la saturación.
- > 0 significa desaturación completa (escala de grises).
Ejemplo:
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic"
type="luminanceToAlpha"
values="0.2" />
</filter>
- type=”matrix”: Realiza complejas manipulaciones de color usando álgebra matricial; cuando el valor que ponemos en la array según la tabla de cada canal en la salida se especifica a partir de una combinación de su color existente.
Ejemplo:
<filter>
<feColorMatrix in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
- type=”hueRotate”: Hace girar cada color alrededor de la rueda de color, ajustando la luminosidad para mantener una luminosidad constante.
Ejemplo:
<filter id="colorMeLTA">
<feColorMatrix in="SourceGraphic"
type="hueRotate" />
</filter>
Nota: la propiedad se hereda, por lo que puede establecerla una vez en un <filtro>, o incluso en el <svg> como un todo.
Ejemplo: A continuación se dan algunos ejemplos del elemento anterior:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <svg width="30%" height="30%" viewBox="0 0 300 500" preserveAspectRatio="xMidYMid meet" <defs> <g id="squares"> <rect x="0" y="0" width="30" height="30" style="fill: #f00;" /> <rect x="40" y="0" width="30" height="30" style="fill: #0f0;" /> <rect x="80" y="0" width="30" height="30" style="fill: #00f;" /> <rect x="120" y="0" width="30" height="30" style="fill: #ff0;" /> <rect x="160" y="0" width="30" height="30" style="fill: #f0f;" /> <rect x="200" y="0" width="30" height="30" style="fill: #0ff;" /> </g> </defs> <use href="#squares" /> <text x="70" y="50">Reference</text> <!-- identity matrix --> <filter id="colorMeTheSame"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#squares" transform="translate(0 70)" filter="url(#colorMeTheSame)" /> <text x="70" y="120">Identity matrix </text> <!-- Combine RGB into green matrix --> <filter id="colorMeGreen"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#squares" transform="translate(0 140)" filter="url(#colorMeGreen)" /> <text x="70" y="190">rgbToGreen </text> <!-- luminanceToAlpha --> <filter id="colorMeSaturate"> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" values="0.2" /> </filter> <use href="#squares" transform="translate(0 210)" filter="url(#colorMeSaturate)" /> <text x="70" y="260">luminanceToAlpha </text> <!-- saturate--> <filter id="colorMeHueRotate"> <feColorMatrix in="SourceGraphic" type="saturate " values="180" /> </filter> <use href="#squares" transform="translate(0 280)" filter="url(#colorMeHueRotate)" /> <text x="70" y="330">saturate</text> <!-- hueRotate --> <filter id="colorMeLTA"> <feColorMatrix in="SourceGraphic" type="hueRotate" /> </filter> <use href="#squares" transform="translate(0 350)" filter="url(#colorMeLTA)" /> <text x="70" y="400">hueRotate</text> </svg> <script src="" async defer></script> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con el elemento SVG <feColorMatrix>:
- Cromo
- Borde
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por rudrakshladdha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA