Looking for svg Answers? Try Ask4KnowledgeBase
Looking for svg Keywords? Try Ask4Keywords

SVGFiltros


Sintaxis

  • Declaración de filtro: <filter id="filter-id" > ... lista de primitivos secundarios ... </filter>
  • Aplicar filtro a través del atributo SVG: <elementname filter="url(#filter-id)" ... />
  • Aplicar filtro a través de la propiedad CSS: (-prefix- ) filter: url ("# filter-id");

Parámetros

Atributos del elemento Detalles
Filtrar región El elemento de filtro puede definir opcionalmente la posición, las dimensiones, la resolución y las unidades para la salida de un efecto de filtro. La posición y las dimensiones de un filtro se pueden especificar utilizando los siguientes parámetros: x, y, ancho, altura. Los valores predeterminados no son intuitivos y son: x: -10% y: -10% ancho: 120% altura: 120%
Resolución del filtro El atributo filterRes es un atributo opcional en SVG 1.1 que se puede usar para especificar la resolución a la que se procesa el filtro. Este atributo tenía un soporte desigual y ahora está en desuso en los navegadores actuales.
Unidades de filtro De forma predeterminada, las unidades y el sistema de coordenadas para la región de efectos de filtro (x, y, ancho, alto) de un elemento de filtro se establecen en relación con el cuadro delimitador del elemento que hace referencia al filtro. En términos de SVG, esto se llama "objectBoundingBox". Cuando escribimos x = "50%" significa "establecer la posición inicial x de la región del filtro en el lado izquierdo del cuadro delimitador del elemento de referencia + 50% del ancho del elemento". Pero también puede especificar las unidades y las coordenadas explícitamente estableciendo la propiedad filterUnits. Las dos alternativas son "objectBoundingBox" (el valor predeterminado que acabamos de describir) o "userSpaceOnUse". userSpaceOnUse establece las unidades de filtro y el sistema de coordenadas en el lienzo del elemento de referencia, o en términos de SVG, el "userSpaceOnUse".
Unidades primitivas Además del sistema de unidad para el filtro en sí, también puede especificar el sistema de unidad que las primitivas de filtro hijo del filtro usarán a través del atributo primitiveUnits. Una vez más, la elección es entre userSpaceOnUse y objectBoundingBox. Estos afectan las coordenadas 0,0 y los valores unitarios de las primitivas de filtro de la misma manera que para las unidades de filtro.
Espacio de color El espacio de color predeterminado para los filtros SVG es linearRGB. El atributo opcional color-interpolation-filters se puede establecer en sRGB para cambiar el espacio de color al espacio sRGB más convencional.

Observaciones

La mayoría de los atributos de filtro se pueden animar a través del elemento <animate> , aunque debe usar la biblioteca "fakeSMIL" en IE para lograr los mismos resultados. La animación SMIL (el elemento <animate> ) quedará en desuso en favor de la nueva especificación de animaciones web, que tiene un soporte muy limitado a partir de mediados de 2016.

Los elementos secundarios del elemento Filtro (primitivas de filtro) tienen dos atributos opcionales que especifican el espacio de color dentro del cual se realizan los cálculos de interpolación de color: interpolación de color y filtros de interpolación de color. El valor predeterminado para el primero es sRGB, y el valor predeterminado para el último es linearRGB. Las manipulaciones que invierten el espacio de color (a través de feColorMatrix o feComponentTransfer) pueden generar resultados no intuitivos, para aquellos que se utilizan para el espacio de color sRGB de CSS. Por ejemplo, una inversión de color de una imagen en escala de grises en RGB lineal resultará en un cambio pronunciado hacia tonos más blancos. Esto se puede corregir estableciendo el valor de la primitiva en sRGB. Estos atributos pueden establecerse en las primitivas de filtro individuales o heredarse del propio elemento de filtro.

Si no se especifica ninguna otra entrada, pero se requiere una, la primera primitiva de filtro dentro de un filtro tomará una versión rasterizada (en mapa de bits) del elemento referente como su entrada. Las primitivas de filtro posteriores que esperan una entrada tomarán el resultado de la primitiva de filtro inmediatamente anterior como entrada.

En filtros complejos, puede ser difícil mantener un seguimiento (y depurar) las entradas y salidas si se dejan implícitas; y es una buena práctica declarar explícitamente entradas y salidas para cada primitiva.


Los primitivos de filtro SVG se pueden dividir coloquialmente en entradas, transformaciones, efectos de iluminación y combinaciones.

Entradas:

feFlood: genera un campo de color

FeTurbulence: genera una gran variedad de efectos de ruido.

feImage: genera una imagen a partir de una referencia de imagen externa, URI de datos o referencia de objeto (las referencias de objeto no se admiten en Firefox a partir de mediados de diciembre de 2012)

Transformaciones

feColorMatrix: transforma los valores de entrada de un píxel RBGA en valores de salida

feComponentTransfer: ajusta la curva de color de un canal de color individual

feConvolveMatrix: reemplaza cada píxel con un nuevo píxel calculado a partir de los valores de píxel en un área relativa al píxel actual)

feGaussianBlur: reemplaza el píxel actual por un promedio ponderado de píxeles en un área alrededor del píxel

feDisplacementMap: mueve cada píxel desde su posición actual en función de los valores R, G o B de otro gráfico de entrada.

feMorphology: reemplaza cada píxel con un nuevo píxel calculado a partir del valor máximo o mínimo de todos los píxeles en un área rectangular alrededor de ese píxel.

feOffset: mueve la entrada desde su posición actual

Efectos de iluminación:

feSpecularLighting: proporciona un efecto de iluminación 2D o pseudo-3D "brillante"

feDiffuseLighting: proporciona un efecto de iluminación 2D o pseudo-3D "mate"

feDistantLight: proporciona una fuente de luz distante para iluminación especular o difusa

feSpotLight: proporciona una fuente de luz de sección cónica para iluminación especular o difusa

fePointLight: proporciona una fuente de luz puntual para iluminación especular o difusa

Combinaciones

feMerge: crea un simple sobre compuesto a partir de múltiples entradas (incluidas las entradas de filtro anteriores)

feBlend: combina entradas múltiples usando reglas de mezcla

feComposite: combina entradas múltiples utilizando reglas de combinación de conjuntos, teniendo en cuenta los valores alfa.

feTile: entrada de azulejos para crear un patrón de repetición


Otras notas

Aunque SVG es una tecnología de gráficos vectoriales, es importante enfatizar que los filtros SVG realizan operaciones a nivel de píxeles en todas las entradas (incluidas las formas SVG) y producen salidas rasterizadas (en mapa de bits) a un nivel específico de resolución. La aplicación de una transformación a escala 10x (por ejemplo) en una curva SVG simple que se ha filtrado a la resolución de pantalla normal producirá bordes pixelados, ya que el filtro ha convertido a píxeles el efecto de suavizado del gráfico original y se ha ampliado. (No está claro si esto cumple con las especificaciones o solo es una limitación de las implementaciones actuales)

Recuerde que SVG es XML cuando escribe filtros, por lo que todas las etiquetas deben cerrarse y muchas propiedades y atributos deben especificarse explícitamente o el filtro no se ejecutará.

Un elemento de filtro nunca se renderiza directamente. Solo se hace referencia al uso de la propiedad de filtro en el elemento al que se aplica el filtro. Tenga en cuenta que la propiedad de visualización no se aplica al elemento de filtro y los elementos no se representan directamente, incluso si la propiedad de visualización se establece en un valor distinto de "ninguno". A la inversa, los elementos de filtro están disponibles para referencia incluso cuando la propiedad de visualización en el elemento de filtro o cualquiera de sus antepasados ​​se establece en "ninguno".

Se puede hacer referencia a los filtros SVG a través de un filtro CSS, aunque a mediados de 2016, solo un subconjunto de primitivas se admiten a través de este mecanismo, y este mecanismo no es compatible con los navegadores de Microsoft.

Filtros Ejemplos relacionados