Los filtros pueden considerarse como la característica más poderosa de SVG. Le permiten agregar efectos de filtro que solo están disponibles en software profesional a gráficos (elementos gráficos y elementos de contenedores). Esto le facilita generar y modificar imágenes en el lado del cliente. Además, el filtro no destruye la estructura del documento original, por lo que también es muy mantenible.
Los filtros se definen mediante elementos del filtro : cuando sea necesario, agregue atributos de filtro a los gráficos o contenedores que requieren efectos del filtro y consulte los filtros relevantes.Los elementos de filtro contienen muchas operaciones atómicas de filtro; Cada operación atómica realiza una operación gráfica básica en el objeto entrante y produce salida gráfica. La mayoría de las operaciones atómicas generan resultados básicamente una imagen RGBA. La entrada a cada operación atómica puede ser el gráfico de origen o el resultado de otras operaciones atómicas. Por lo tanto, el proceso de citar el efecto de filtro es aplicar las operaciones atómicas del filtro relevantes en los gráficos de origen, y finalmente generar un nuevo gráfico y renderizarlo.
Al usar el atributo de filtro en un contenedor (como un elemento G), el efecto de filtro se aplicará a todos los elementos en el contenedor. Sin embargo, los elementos en el contenedor no se representan directamente en la pantalla, sino que se almacenan temporalmente. Los comandos de gráficos se ejecutan como parte del proceso de procesamiento de los elementos de filtro referenciados y luego renderizado. Esto se especifica utilizando SourceGraphic y Sourcealpha. Este efecto se demuestra en el tercer caso en el segundo ejemplo a continuación.
Algunos efectos de filtro generarán puntos de píxeles indefinidos, que se procesarán en efectos transparentes.
Echemos un vistazo a un ejemplo:
<SVG ViewBox = "0 0 200 120"
xmlns = "http://www.w3.org/2000/svg" versión = "1.1">
<title> SVG Filter Effect Ejemplo </title>
<Edc> Utilice varios efectos de filtro para lograr los efectos de iluminación 3D de un par de gráficos. </ descr>
<fs defs>
<Filtro id = "myFilter" filtreUnits = "userSpaceOnuse" x = "0" y = "0">
<fegaussianblur in = "sourcealpha" stddeviation = "4" result = "blur"/>
<feoffset in = "blur" dx = "4" dy = "4" resultado = "offsetBlur"/>
<fespecularlighting in = "blur" surfaceCeScale = "5" SpecularConstant = ". 75"
especularexponent = "20" iluminación-color = "#bbbbbbb"
resultado = "Specout">
<fepointlight x = "-5000" y = "-10000" z = "20000"/>
</fespecularlighting>
<fecomposis in = "specout" in2 = "sourcealpha" operador = "en" result = "specout"/>
<fecomposis in = "fuentegraphic" in2 = "specout" operator = "aritmética"
k1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "litpaint"/>
<femerge>
<femergenode in = "offsetblur"/>
<femergenode in = "litPaint"/>
</femerge>
</filter>
</defs>
<rect x = "1" y = "1" relleno = "#88888" Stroke = "Blue" />
<g filter = "url (#myfilter)">
<g>
<Path Fill = "None" Stroke = "#D90000" Stroke-width = "10"
D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />
<Path Fill = "#D90000"
D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />
<g relleno = "#ffffff" stroke = "negro" font-size = "45" Font-Family = "Verdana">
<Text x = "52" y = "76"> svg </ext>
</g>
</g>
</g>
</svg>
El efecto de este ejemplo que se ejecuta en Firefox es el resultado de la última imagen:
Nota: Puede haber algunas diferencias en otros navegadores.
Este filtro usa 6 efectos, a su vez (la representación de un solo paso se muestra en la imagen de arriba :):
Fegaussiandblur: Este paso es realizar el procesamiento de desenfoque gaussiano; La entrada de este efecto especial es el valor de transparencia de la imagen de origen, y la salida se almacena en el desenfoque tamponado temporal. El valor de desenfoque se utiliza como entrada de Feoffset y Fespecular Lighting a continuación.
Feoffset: este paso es traducir la imagen en algunas posiciones; La entrada de este efecto es el desenfoque generado en el paso anterior, generando un nuevo caché offetSetblur.
Fespecular Lighting: este paso es procesar la superficie de la imagen con luz. La entrada es el desenfoque generado en el primer paso, y la salida se almacena en la nueva especie de caché.
Dos veces fecompuesto: estos dos pasos combinan diferentes capas de caché.
FEMERGE: Este paso es fusionar diferentes capas. Este paso suele ser el paso final, fusionando las capas de cada caché, generando la imagen final y la representa. Aunque este paso se puede completar con efectos especiales de Fecomposis varias veces, todavía no es muy conveniente después de todo.
El elemento de filtro y el área de efecto de filtro El área de efecto de filtro se refiere al área donde funciona el efecto del filtro. El tamaño de esta área se define por las siguientes propiedades del elemento de filtro: FilterUnits = UsersPaceOnuse | ObjectBoundingBoxEsta propiedad define el espacio de coordenadas utilizado por X, Y, ancho y altura. Al igual que otras propiedades relacionadas con la unidad, esta propiedad tiene dos valores: UserSpaceOnuse y ObjectBoundingBox (predeterminado).
UserSpaceOnuse representa el sistema de coordenadas del usuario que utiliza el elemento que hace referencia al elemento de filtro.
ObjectBoundingBox significa usar el porcentaje del cuadro delimitador que hace referencia al elemento de filtro como el rango de valores.
x, y, ancho, alturaEstas propiedades definen el área rectangular donde funciona el filtro. El efecto del filtro no se aplicará a puntos más allá de esta área. El valor predeterminado de X, Y es -10%, y el valor predeterminado del ancho y la altura es del 120%.
filtrosEsta propiedad define el tamaño del área de caché intermedio, por lo que también define la calidad de la imagen en caché. Normalmente, este valor no es necesario, y el navegador seleccionará el valor apropiado en sí. En general, el área del efecto del filtro debe definirse para corresponder exactamente al punto de fondo y al punto uno por uno, lo que generará ciertas ventajas de eficiencia.
Además de estas propiedades, las siguientes propiedades del elemento de filtro también son importantes:
PrimitiveUnits = UsersPaceOnuse | ObjectBoundingBoxEsta propiedad define el espacio de coordenadas utilizado por coordenadas y longitudes en cada operación atómica. El valor de esta propiedad es UserSpaceOnuse y ObjectBoundingBox. Pero el valor predeterminado es UserSpaceOnuse.
xlink: href = <rii>Esta propiedad se utiliza para referirse a otros elementos de filtro en el elemento de filtro actual.
Vale la pena señalar que el elemento de filtro solo heredará los atributos de su nodo principal y no heredará los atributos del elemento que hace referencia al elemento de filtro.
Descripción general del filtro Las diversas operaciones atómicas del filtro no se describirán en detalle. Puede consultar los documentos oficiales cuando sea necesario. Echemos un vistazo a los puntos en común de estas operaciones. Excepto por el atributo in, los otros atributos a continuación están disponibles para todas las operaciones atómicas. x, y, ancho, altura No diré mucho sobre estas propiedades. Definen el área donde funcionan los átomos del filtro, por lo que también podría convertirse en el área del filtro. Estos atributos están limitados por el área de acción del elemento de filtro. Por defecto, los valores son 0, 0, 100% y 100% respectivamente. La región de acción de estos átomos excede la del elemento de filtro no funciona. resultadoAlmacene los resultados de este paso. Después de especificar el resultado, otras operaciones posteriores del mismo elemento de filtro se pueden especificar como entrada utilizando IN. Lo sabrá refiriéndose al ejemplo anterior. Si se omite este valor, solo se puede usar como entrada implícita para el siguiente paso siguiente. Tenga en cuenta que si el siguiente paso siguiente ya ha especificado la entrada con IN, prevalecerá la especificada en el siguiente paso.
enIndica la entrada para este paso. Si se omite el atributo in, el resultado del paso anterior se utilizará de forma predeterminada como la entrada de este paso. Si se omite el paso, SourceGraphic se usará como el valor (consulte la descripción a continuación). El atributo in puede consultar el valor almacenado en el resultado anterior, o especificar los siguientes 6 valores especiales :
SourceGraphic: este valor representa la entrada para usar el elemento gráfico actual como operación.
Sourcealpha: este valor representa la entrada para usar el valor alfa del elemento gráfico actual como operación.
BackgroundImage: este valor representa el uso de la captura de pantalla de fondo actual como entrada de la operación.
BackgroundAlpha: este valor representa la entrada de la operación utilizando el valor alfa de la captura de pantalla de fondo actual.
FillPaint: este valor utiliza el valor del atributo de relleno del elemento gráfico actual como entrada a la operación.
StrokePaint: este valor utiliza el valor del atributo de trazo del elemento gráfico actual como entrada a la operación.
Entre estos valores, BackgroundImage y BackgroundAlpha pueden ser difíciles de entender. Echemos un vistazo a estos dos valores a continuación.
Acceso a la captura de pantalla de fondo Normalmente, podemos usar directamente la captura de pantalla de fondo del elemento que hace referencia al elemento de filtro como la imagen fuente del efecto de filtro. Los valores que representan esta entrada son BackgroundImage y BackgroundAlpha, el anterior contiene los valores de color y alfa, y este último contiene solo los valores alfa. Para respaldar este uso, también es necesario habilitar explícitamente esta característica en el elemento que hace referencia al elemento de filtro, que requiere establecer la propiedad de habilitación del elemento del elemento. habilitar-background = acumular | Nuevo [<x> <y> <width> <cight>] | heredarEsta propiedad solo se puede usar para elementos de contenedores, y define cómo tomar capturas de pantalla de fondo.
El nuevo valor representa: permite que los elementos infantiles del contenedor accedan a la captura de pantalla de fondo del contenedor, y los elementos infantiles del contenedor se representan en el fondo y en el dispositivo.
Accumule es el valor predeterminado, y su efecto depende del contexto: si el elemento del contenedor principal utiliza habilitar el fondo: nuevo, entonces todos los elementos gráficos del contenedor participarán en la representación de los antecedentes. De lo contrario, significa que el contenedor principal no está listo para tomar una captura de pantalla de fondo, y la visualización del elemento gráfico de este elemento solo se muestra en el dispositivo.
El siguiente ejemplo demuestra el efecto de estos valores:
<SVG ViewBox = "0 0 1350 270"
xmlns = "http://www.w3.org/2000/svg" versión = "1.1">
<title> Ejemplo del uso de capturas de pantalla de fondo </title>
<Edc> Los siguientes ejemplos explican el uso de capturas de pantalla de fondo en diferentes situaciones </ descr>
<fs defs>
<filtro id = "shiftbgandblur"
filterUnits = "UsersPaceOnuse" x = "0" y = "0">
<Edc> Este filtro descarta la imagen de origen, pero usa capturas de pantalla de fondo </ descr>
<feoffset in = "backgroundImage" dx = "0" dy = "125" />
<fegaussianblur stddeviation = "8" />
</filter>
<filtro id = "shiftbgandblur_withsourcegraphic"
filterUnits = "UsersPaceOnuse" x = "0" y = "0">
<Edc> Este efecto especial de filtro combina capturas de pantalla de fondo e imágenes del elemento actual </ descr>
<feoffset in = "backgroundImage" dx = "0" dy = "125" />
<fegaussianblur stddeviation = "8" result = "blur" />
<femerge>
<femergenode in = "blur"/>
<femergenode in = "fuentegraphic"/>
</femerge>
</filter>
</defs>
<g transform = "traduce (0,0)">
<SCC> La primera imagen es el efecto de no agregar un filtro </ descr>
<rect x = "25" y = "25" relleno = "rojo"/>
<g opacity = ". 5">
<círculo cx = "125" cy = "75" r = "45" relleno = "verde"/>
<PolyGon Points = "160,25 160,125 240,75" relleno = "azul"/>
</g>
<rect x = "5" y = "5" relleno = "ninguno" Stroke = "Blue"/>
</g>
<g enable-background = "new" transform = "traduce (270,0)">
<SCC> La segunda imagen es usar los efectos de filtro en el contenedor </ descigrado>
<rect x = "25" y = "25" relleno = "rojo"/>
<g opacity = ". 5">
<círculo cx = "125" cy = "75" r = "45" relleno = "verde"/>
<PolyGon Points = "160,25 160,125 240,75" relleno = "azul"/>
</g>
<g filter = "url (#shiftbgandblur)"/>
<rect x = "5" y = "5" relleno = "ninguno" Stroke = "Blue"/>
</g>
<g enable-background = "new" transform = "traduce (540,0)">
<Edc> La tercera imagen es usar el efecto de filtro en el contenedor interno, prestar atención a la diferencia con la segunda imagen </ descr>
<rect x = "25" y = "25" relleno = "rojo"/>
<g filter = "url (#shiftbgandblur)" opacity = ". 5">
<círculo cx = "125" cy = "75" r = "45" relleno = "verde"/>
<PolyGon Points = "160,25 160,125 240,75" relleno = "azul"/>
</g>
<rect x = "5" y = "5" relleno = "ninguno" Stroke = "Blue"/>
</g>
<g enable-background = "new" transform = "traduce (810,0)">
<SCC> La cuarta imagen es usar efectos de filtro en los elementos gráficos </ descreno>
<rect x = "25" y = "25" relleno = "rojo"/>
<g opacity = ". 5">
<círculo cx = "125" cy = "75" r = "45" relleno = "verde"/>
<Polygon Points = "160,25 160,125 240,75" relleno = "azul"
filtre = "url (#shiftbgandblur)"/>
</g>
<rect x = "5" y = "5" relleno = "ninguno" Stroke = "Blue"/>
</g>
<g enable-background = "new" transform = "traduce (1080,0)">
<Edc> La quinta imagen es usar diferentes efectos de filtro en los elementos gráficos </ descreno>
<rect x = "25" y = "25" relleno = "rojo"/>
<g opacity = ". 5">
<círculo cx = "125" cy = "75" r = "45" relleno = "verde"/>
<Polygon Points = "160,25 160,125 240,75" relleno = "azul"
filtre = "url (#shiftbgandblur_withsourcegraphic)"/>
</g>
<rect x = "5" y = "5" relleno = "ninguno" Stroke = "Blue"/>
</g>
</svg>
Las representaciones son las siguientes (la primera fila son las representaciones finales, y la segunda fila es el efecto de filtro):
Este ejemplo contiene 5 partes :1. Las imágenes en el primer grupo no usan ningún efecto de filtro.
2. El segundo grupo usa la misma imagen, pero permite el efecto de usar el fondo.
3. El tercer grupo usa la misma imagen, pero usa el efecto de filtro en el contenedor interno.
4. El cuarto grupo utiliza efectos de filtro en los elementos del contenedor de contenido.
5. El último grupo utiliza el mismo efecto de filtro que el cuarto grupo y fusiona la imagen de origen.
El concepto de filtros es realmente muy simple, pero el código para cada efecto parece más complicado. De hecho, seremos claro después de probarlo. Sin embargo, dado que diferentes navegadores admiten SVG de manera diferente, el efecto específico debe ser probado por usted mismo antes de usarlo.
Referencia prácticaÍndice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centro de desarrollo: https://developer.mozilla.org/en/svg
Referencia popular: http://www.chinasvg.com/
Documento oficial: http://www.w3.org/tr/svg11/