Filtros de elementos

Un filtro cambia cómo se dibuja un elemento sin cambiar el elemento en sí:

• La imagen del elemento pasa por una cadena de primitivas, como un desenfoque, una sombra o una matriz de color, aplicadas en orden.
• Son los filtros SVG que admiten los navegadores web, así que todo lo que sepas sobre ellos vale aquí.
• El elemento sigue siendo editable por debajo. Elimina el filtro y se dibuja como antes.

Qué puede tener un filtro:

• Cualquier elemento salvo los grupos y las cámaras.
• Un marco pasa su filtro a cada elemento que contiene, además del filtro propio de cada uno. Cada elemento se filtra por separado, así que un desenfoque o una sombra nunca se unen entre elementos. El fondo, el borde y el encabezado del marco no se filtran.

Las cámaras tienen sus propios filtros, que funcionan de otra manera. Consulta Filtros de cámara.

Dar un filtro a un elemento

• Operación:
  1. Selecciona los elementos a filtrar.
  2. Haz clic en Añadir atributos de filtro al elemento en el panel de acciones. Esto activa el filtrado en los elementos y muestra su sección Filtro en el panel de atributos.
  3. Elige una primitiva en el selector Añadir primitiva de la sección Filtro. Puedes escribir para buscarla.
• Resultado: la primitiva se añade a la cadena con sus valores por defecto y el elemento se dibuja a través de ella al instante. Aparecen la lista Filtros y sus controles.
• Consejo: con varios elementos seleccionados, editas sus filtros a la vez cuando cada uno tiene un filtro con la misma cadena de tipos de primitiva. Los valores mostrados son los del primer elemento. Seleccionar un grupo edita los filtros de los elementos que contiene.

Sección Filtro

• Añadir primitiva: añade una primitiva al final de la cadena, tomando la primitiva anterior como entrada.
  • blur: suaviza el elemento.
  • dropShadow: añade una sombra tras el elemento.
  • morphology: engrosa o adelgaza los bordes del elemento.
  • turbulence: genera ruido, para texturas y distorsiones.
  • blend: mezcla dos entradas con un modo de fusión.
  • composite: combina dos entradas según su transparencia.
  • displacement: distorsiona una entrada usando otra como mapa.
  • colorMatrix: recolorea el elemento mediante una matriz de color.
  • convolveMatrix: enfoca, realza o desenfoca mediante un núcleo.
  • componentTransfer: reasigna cada canal de color, para contraste y niveles.
  • specularLight: añade un brillo de iluminación.
  • diffuseLight: añade una iluminación suave.
  • flood: rellena la región con un solo color.
  • offset: desplaza la entrada una distancia.
  • merge: apila varias entradas unas sobre otras.
  • tile: repite la entrada como mosaico.
  • image: incorpora una imagen como entrada.
• Filtros: la cabecera de la cadena, que aparece cuando tiene una primitiva.
  • Ajustes del filtro: abre los valores de región e interpolación descritos en Región del filtro.
  • Visibilidad del filtro: activa o desactiva el filtro entero sin eliminarlo.
  • Eliminar todas las primitivas de filtro: vacía la cadena. La sección se mantiene, lista para nuevas primitivas, y la siguiente empieza un filtro nuevo con la región y la Interpolación por defecto.
• Para cada primitiva de la cadena, en orden:
  • Reordenar primitiva de filtro: arrastra el asa arriba o abajo para cambiar la posición de la primitiva en la cadena.
  • Nombre del filtro: haz clic en el nombre para renombrar la primitiva, hasta 40 caracteres. Hasta entonces muestra el identificador de la primitiva, como blur_0. El nombre es solo una etiqueta: al renombrarla, las entradas que leen esta primitiva siguen conectadas.
  • Ajustes de la primitiva: abre los valores de la primitiva, descritos en Ajustes de las primitivas.
  • Visibilidad de la primitiva: activa o desactiva esa primitiva. La cadena la salta mientras está desactivada.
  • Eliminar primitiva de filtro: la elimina de la cadena.

Entradas

Cada primitiva trabaja sobre una entrada y produce un resultado que las siguientes pueden usar.

• Entrada: lo que lee la primitiva. Las opciones son SourceGraphic, el elemento tal como se dibuja, SourceAlpha, solo su transparencia, y el resultado de cada primitiva anterior en la cadena, mostrado por su nombre.
• Una primitiva recién añadida lee el resultado de la primitiva anterior, o SourceGraphic cuando es la primera.
• blend, composite y displacement leen dos entradas, Entrada y Entrada 2. merge lee una lista de entradas. flood, image y turbulence producen un resultado sin leer ninguna.
• Una primitiva no puede leer un resultado que viene más tarde en la cadena. Al eliminar o mover una primitiva, las entradas que ya no pueden leerla pasan a un resultado anterior.

Región del filtro

El filtro se calcula dentro de una región. Todo lo que las primitivas empujen fuera de ella, como un desenfoque amplio o una sombra larga, se recorta.

• Ajustes del filtro en la cabecera Filtros: X, Y, W y H como porcentajes del elemento, e Interpolación, el espacio de color en el que calcula el filtro: sRGB o linearRGB. Los filtros nuevos empiezan en -20 %, -20 %, 140 % y 140 %, lo que deja un margen del 20 % en cada lado.

Región personalizada de una primitiva

• Región personalizada en los ajustes de cada primitiva: limita esa primitiva a su propia región, dada como X, Y, W y H en lugar de porcentajes.
  • Los valores están en las unidades del propio elemento, medidas desde su esquina superior izquierda. La región empieza siendo la caja del elemento.
  • Mientras está desactivada, la primitiva cubre toda la región del filtro. Cuando todas las entradas que lee son resultados de otras primitivas, cubre solo el área de esas entradas, que es menor si tienen su propia Región personalizada. tile siempre cubre toda la región del filtro.

Desactivar filtros sin eliminarlos

• Operación: haz clic en Visibilidad del filtro en la cabecera Filtros para desactivar el filtro entero, o en Visibilidad de la primitiva de una fila para saltar solo esa primitiva.
• Resultado: el elemento se dibuja sin el filtro, o sin esa primitiva, y la cadena conserva sus valores para cuando la vuelvas a activar.

Eliminar filtros

Quita primitivas de la cadena, o el filtro entero.

• Operación: haz clic en Eliminar primitiva de filtro en una fila para eliminar una primitiva, o en Eliminar todas las primitivas de filtro en la cabecera Filtros para vaciar la cadena.
• Resultado: el elemento se dibuja sin las primitivas eliminadas. Con la cadena vacía, la sección se mantiene con el selector Añadir primitiva, lista para nuevas primitivas.

Eliminar la sección Filtro

• Operación: haz clic en Eliminar filtro en el panel de acciones.
• Resultado: el filtro y su cadena se eliminan de la selección y la sección Filtro desaparece del panel de atributos.

Filtros y otras operaciones

• Duplicar o pegar un elemento filtrado da a la copia su propio filtro con la misma cadena. Consulta Duplicar.
• Agrupar no cambia los filtros: cada miembro conserva el suyo.
• Los marcos pasan su filtro a cada elemento que contienen. Mover un elemento dentro o fuera de un marco actualiza lo que hereda.
• Tomar atributos de otro elemento con el cuentagotas de la sección Filtro copia su filtro entero: la cadena de primitivas, la región y la Interpolación. Consulta Atributos.
• Convertir a imagen conserva el aspecto filtrado. Algunos elementos mantienen su filtro como un filtro editable en la imagen nueva, y el resto lo llevan dibujado en los píxeles. Consulta Conversiones.
• Las animaciones no cambian los valores del filtro; el filtro se dibuja igual durante la reproducción.
• Exportar a SVG o imagen conserva el filtro.

Ajustes de las primitivas

Cada primitiva tiene sus propios valores. Los pares numéricos con el interruptor Vincular ambos valores entre ellos cambian juntos mientras está activado, que es como empiezan. Cada primitiva termina con sus entradas y su Región personalizada, salvo flood, image y turbulence, que no tienen entradas.

blur

• Rx, Ry: el radio de desenfoque en cada eje.
• Borde: cómo se tratan los píxeles más allá del borde: duplicate, wrap o none.

dropShadow

• Rx, Ry: el radio de desenfoque de la sombra en cada eje.
• Dx, Dy: el desplazamiento de la sombra en cada eje.
• Color de la sombra y Opacidad de la sombra: el color de la sombra y su opacidad, de 0 a 1.
• Modo: shape mantiene el desplazamiento alineado con el elemento al rotarlo, canvas lo mantiene alineado con el tablero.

morphology

• Rx, Ry: el radio en cada eje.
• Modo: dilate engrosa, erode adelgaza.

turbulence

• Fx, Fy: la frecuencia base en cada eje.
• Oct: el número de octavas.
• S: la semilla aleatoria.
• Tipo: fractalNoise o turbulence.

blend

• Modo: cómo se combinan las dos entradas.
  • normal: muestra Entrada sobre Entrada 2, solo sus áreas transparentes dejan pasar Entrada 2.
  • multiply: multiplica los colores, así que el resultado nunca es más claro que ninguna de las entradas, como diapositivas superpuestas.
  • screen: lo contrario de multiply, así que el resultado nunca es más oscuro que ninguna de las entradas, como proyectar ambas en la misma pantalla.
  • darken: conserva el valor más bajo de cada canal de color en cada píxel.
  • lighten: conserva el valor más alto de cada canal de color en cada píxel.
• Entrada, Entrada 2: las dos entradas a mezclar.

composite

• Operador: cómo se combinan las dos entradas, según su transparencia.
  • over: Entrada encima de Entrada 2.
  • in: conserva Entrada solo donde Entrada 2 es opaca, como una plantilla.
  • out: conserva Entrada solo donde Entrada 2 es transparente, la plantilla inversa.
  • atop: Entrada encima de Entrada 2, pero solo donde Entrada 2 es opaca.
  • xor: conserva cada entrada solo donde la otra es transparente, así que el solapamiento desaparece.
  • arithmetic: calcula cada píxel a partir de los cuatro coeficientes, así que permite mezclas y pesos personalizados.
• K1 a K4: los coeficientes de arithmetic, visibles mientras es el Operador. Cada píxel del resultado es K1 por las dos entradas multiplicadas, más K2 por Entrada, más K3 por Entrada 2, más K4.
  • Empiezan en 0, lo que da un resultado transparente hasta que los cambies. Por ejemplo, 0, 0.5, 0.5, 0 promedia las dos entradas.
• Entrada, Entrada 2: las dos entradas a combinar.

displacement

• Sc: la escala del desplazamiento.
• Cx, Cy: el canal de color de Entrada 2 que desplaza Entrada en cada eje: R, G, B o A.
• Entrada, Entrada 2: la entrada a distorsionar y el mapa.

colorMatrix

• Modo: cómo se transforman los colores. Una colorMatrix nueva empieza en saturate con valor 0, lo que deja el elemento en gris.
  • matrix: una matriz de color completa, así que cualquier canal puede construirse a partir de cualquier mezcla de los demás. Sirve para tintes, intercambios de canales o inversiones.
  • saturate: escala la intensidad del color. 0 deja la imagen en gris, 1 la deja como está, valores mayores intensifican los colores.
  • hueRotate: desplaza cada tono alrededor de la rueda de color un ángulo, conservando el brillo de forma aproximada.
  • luminanceToAlpha: convierte el brillo en opacidad. El resultado es negro, opaco donde la entrada era clara y transparente donde era oscura. Útil para construir máscaras a partir de otras primitivas.
• Valor: de 0 a 10 para saturate, un ángulo de 0 a 360 para hueRotate.
• Valores: la cuadrícula de 4 × 5 para matrix, con una fila por canal de salida (R, G, B, A) y una columna por canal de entrada más una constante.

convolveMatrix

• Ox, Oy: el tamaño del núcleo, de 1 a 9. La Matriz del núcleo crece o se reduce para ajustarse.
• Div: el divisor.
• Bi: el sesgo.
• Tx, Ty: el píxel objetivo dentro del núcleo, de 0 al tamaño menos 1.
• Matriz del núcleo: la cuadrícula de valores del núcleo.

componentTransfer

• Un bloque por canal: Rojo, Verde, Azul y Alfa.
• El selector de cada bloque: la función que reasigna el canal, de su valor de entrada a su valor de salida.
  • identity: deja el canal sin cambios.
  • table: pasa el canal por una lista de valores con transiciones rectas entre ellos, como una línea trazada por puntos.
  • discrete: pasa el canal por una lista de valores con escalones duros, como posterizar.
  • linear: multiplica el canal por la pendiente y suma la ordenada en el origen, para contraste y brillo.
  • gamma: aplica una curva de potencia, amplitud por el valor elevado al exponente, más el desplazamiento, para corrección gamma.
• Tv: la lista de valores para table y discrete, como números separados por espacios.
• Slo, Int: la pendiente y la ordenada en el origen para linear.
• Am, Exp, Off: la amplitud, el exponente y el desplazamiento para gamma.

specularLight

• Sc: la escala de la superficie.
• K: la constante especular.
• Exp: el exponente especular.
• Color de la iluminación: el color de la luz.
• Tipo: distant, point o spot.
• Az, El: el acimut y la elevación, para distant.
• X, Y, Z: la posición de la luz, para point y spot.
• Px, Py, Pz: el punto al que apunta la luz, para spot.
• Ex, La: el exponente del foco y el ángulo del cono, para spot.
• Su resultado es solo el brillo. Combínalo con el elemento mediante composite.

diffuseLight

• Sc: la escala de la superficie.
• K: la constante difusa.
• Color de la iluminación: el color de la luz.
• Tipo y los valores de la luz, igual que en specularLight.
• Su resultado cubre toda la región y sustituye al elemento. Combínalos mediante blend o composite.

flood

• Color del relleno y Opacidad del relleno: el color del relleno y su opacidad, de 0 a 1.

offset

• Dx, Dy: la distancia en cada eje.

merge

• Una lista numerada de entradas. Cada una se dibuja sobre las anteriores, así que la entrada 1 queda debajo.
• Añadir entrada: elige una entrada en este selector para añadirla a la lista. Ofrece las entradas que aún no están en ella. El selector de una fila reemplaza esa entrada, y Eliminar entrada de filtro la quita.

tile

• Repite la región de su entrada por toda la suya. Para ver mosaicos, da a la primitiva de entrada una Región personalizada más pequeña.

image

• Añadir o Reemplazar: elige la imagen. Pegar del portapapeles usa una copiada.
• Alineación: none, o una de nueve colocaciones como xMidYMid, la opción por defecto. Con none la imagen se estira para llenar la región.
• Cobertura: meet ajusta la imagen completa, slice llena la región.

Para saber más

La cadena usa las primitivas de filtro SVG tal como las implementan los navegadores, así que estas referencias se aplican directamente. Están en inglés:

• Tutorial de efectos de filtro en MDN: una introducción suave a encadenar primitivas.
• Elementos de primitivas de filtro en MDN: la referencia de cada primitiva y sus atributos.
• SVG Filters 101 en Codrops: una serie que construye efectos prácticos paso a paso.
• El mundo del filtrado por desplazamiento en SVG en Smashing Magazine: turbulencia y desplazamiento en profundidad.
• Editor de filtros SVG: un editor en línea para probar cadenas y entradas antes de construirlas aquí.
• Filter Effects Module Level 1: la especificación del W3C.