HTML5 SVG 2D Introducción 9 - Introducción y aplicación de máscaras y elementos de máscara

SVG admite una variedad de efectos de máscara. Usando estas características, podemos crear muchos efectos deslumbrantes. En cuanto a si la máscara se llama máscara o máscara en chino, no se diferencia. Se llama máscara aquí.

Los tipos de máscaras compatibles con SVG:

1. Ruta de recorte

Una ruta de recorte es un gráfico compuesto de ruta, texto o gráfico básico. Todos los gráficos dentro de la ruta del clip son visibles, y todos los gráficos fuera de la ruta del clip son invisibles.

2. Máscara/máscara

Una máscara es un contenedor que define un conjunto de gráficos y los usa como un medio translúcido que se puede usar para combinar objetos y fondos en primer plano.

Una diferencia importante entre una ruta de recorte y otras máscaras es que la ruta de recorte es una máscara de 1 bits, lo que significa que el objeto cubierto por la ruta de recorte es completamente transparente (visible, ubicado dentro de la ruta de recorte) o completamente opaco (no visible, ubicado fuera de la ruta de recorte). Y la máscara puede especificar la transparencia en diferentes ubicaciones.

El atributo de desbordamiento y el atributo de clip del elemento HTML establecen conjuntamente el comportamiento de recorte del elemento en el contenido. Del mismo modo, en SVG, estas 2 propiedades también se pueden usar.

El atributo de desbordamiento define el comportamiento tomado cuando el contenido de un elemento excede el borde del elemento.

Esta propiedad se puede utilizar para elementos (SVG, símbolo, imagen, extranjera), elementos de patrón y marcadores que pueden crear nuevas ventanas. El valor de esta propiedad es el siguiente:

Visible: muestra todo el contenido, incluso si el contenido ya está fuera del borde del elemento, este es el valor predeterminado.

Oculto: ocultar contenido más allá de la ruta de recorte. La ruta del clip se especifica mediante la propiedad Clip.

Scroll: en forma de una barra de desplazamiento, presentando el contenido más allá de él.

Auto: Usando el comportamiento definido por el navegador, esto parece poco confiable.

Esta propiedad es básicamente la misma que la propiedad del mismo nombre en CSS2, excepto que en SVG, hay algunos procedimientos de procesamiento diferentes:

1. El atributo de desbordamiento no tiene ningún efecto en los elementos distintos de los elementos que crean una nueva ventana (SVG, símbolo, imagen, extranjera), elementos de patrón y marcadores.

2. La ruta de recorte corresponde a la ventana. Si se crea una nueva ventana, se crea una nueva ruta de recorte. La ruta de recorte predeterminada es el límite de la ventana.

La propiedad de clip se usa para establecer la ruta de clip de la ventana actual.

Esta propiedad se puede utilizar para elementos (SVG, símbolo, imagen, extranjera), elementos de patrón y marcadores que pueden crear nuevas ventanas. Esta propiedad tiene los mismos parámetros que la propiedad con el mismo nombre en CSS2. Auto significa que la ruta de recorte es consistente con el borde de la ventana. Al usar el gráfico como parámetro (configurar los valores de la parte superior, derecha, abajo e izquierda del rectángulo de cultivo), se puede usar el valor de coordenadas del usuario (es decir, coordenadas sin unidades). Por ejemplo:

P {clip: rect (5px, 10px, 10px, 5px); }

Tenga en cuenta aquí que de forma predeterminada (el desbordamiento y el clip son valores predeterminados), la ruta del clip es consistente con el borde de la ventana. Después de configurar ViewBox y PreserveareSpectratio, generalmente necesita asignar los cuatro lados de la ruta de clip de clip en los cuatro lados del cuadro de vista para garantizar que algunos efectos de visualización sean los mismos (por supuesto, si todos son valores predeterminados, no necesita configurarlos).

La ruta del clip se define utilizando el elemento Clippath y luego se hace referencia usando el atributo Clip-Path.

Clippath puede contener elementos de ruta, elementos de texto, elementos gráficos básicos (círculo, etc.) y usar elementos. Si es un elemento de uso, debe referirse directamente a la ruta, el texto o los elementos gráficos básicos, y no se pueden hacer referencia a otros elementos.

Tenga en cuenta que la ruta de recorte es solo una capa de máscara de un bit, que es una unión de todos los elementos contenidos. Se pueden mostrar objetos en esta colección, y no se mostrarán objetos que no están dentro de este rango. El algoritmo con el punto de juicio específico que no está dentro del rango se especifica mediante el atributo de regla de clip.

Para los objetos gráficos, la ruta del clip es igual a la unión de la ruta del clip establecida por sí misma con las rutas de clip de todos los elementos externos (incluidas las rutas de clip establecidas por clip-rit y desbordamiento). Algunos puntos a tener en cuenta:

1. El elemento Clippath en sí no hereda la ruta del clip definida por Clippath desde el nodo externo.

2. El elemento Clippath en sí puede establecer el atributo Clip-Path. El efecto es la intersección de dos caminos.

3. El atributo de rango clip se puede establecer para los elementos infantiles del elemento Clippath: el efecto es una unión de dos caminos.

4. Una ruta de recorte vacía cortará todos los contenidos en el elemento.

Aquí hay algunos atributos importantes:

Este atributo define el sistema de coordenadas utilizado por el elemento Clippath. Estamos familiarizados con estos dos valores, a saber, el sistema de coordenadas del usuario que utiliza el elemento que hace referencia a la ruta del clip actual y al valor proporcional del cuadro limitado.

El elemento Clippath nunca se representa directamente, y se hace referencia a través de Clip-Path, por lo que configurar el atributo de visualización del elemento Clippath no tiene ningún efecto.

No hace falta decir que este atributo se usa para referirse a la ruta de recorte. Cabe señalar aquí que todos los elementos de contenedores, los elementos gráficos básicos y los elementos de Clippath pueden usar este atributo.

Esta propiedad se utiliza para determinar qué puntos pertenecen a los puntos dentro de la fuerza de recorte. Esto es fácil de juzgar por gráficos cerrados simples, pero para gráficos complejos con agujeros en el interior, hay una diferencia. El valor de esta propiedad tiene el mismo significado que el valor de la regla de relleno:

No cero: el algoritmo utilizado para este valor es emitir líneas desde el punto a juzgar en cualquier dirección, y luego calcular la dirección del punto de intersección entre la figura y el segmento de línea; El resultado del cálculo comienza de 0, y cada segmento de línea en una intersección es de izquierda a derecha, agregue 1; Cada segmento de línea en una intersección es de derecha a izquierda, reste 1; Después de calcular todos los puntos de intersección de esta manera, si el resultado de este cálculo no es igual a 0, el punto está en la figura y debe llenarse; Si el valor es igual a 0, no es necesario llenarse fuera de la figura. Vea el siguiente ejemplo:

Evenodd: El algoritmo utilizado para este valor es emitir líneas desde el punto que debe juzgarse en cualquier dirección, y luego calcular el número de puntos en los que la figura y la intersección del segmento de línea. Si el número es impar, el punto se cambia a la figura y debe llenarse; Si el número es uniforme, el punto está fuera de la figura y no necesita ser llenado. Vea el ejemplo en la figura a continuación:

El atributo de regla de clip solo se puede utilizar para elementos gráficos internos del elemento Clippath. Por ejemplo, la siguiente configuración funciona:

<g>

<Clippath id = "myclip">

<Path d = "..." clip-rule = "Evenodd" />

</lippath>

<rect clip-path = "url (#myclip)" ... />

</g>

No funciona si el elemento no está en Clippath. Por ejemplo, la siguiente configuración no funciona:

<g clip-rule = "no cero">

<Clippath id = "myclip">

<ruta d = "..." />

</lippath>

<rect clip-path = "url (#myclip)" clip-rule = "evenodd" ... />

</g>

Finalmente, veamos un pequeño ejemplo de la ruta de recorte:

<svg>

<g>

<Clippath id = "myclip">

<ruta d = "m 10,10 L 10,20 L 20,20 L 20,10 z" clip-reghule = "eDodd" />

</lippath>

</g>

<rect clip-path = "url (#myclip)" x = "10" y = "10" relleno = "rojo" />

</svg>

Solo es visible el área de la esquina superior izquierda del rectángulo.

En SVG, puede asignar cualquier elemento gráfico o elemento G como máscara al objeto renderizado para combinar el objeto renderizado en el fondo.

La máscara está definida por el elemento de la máscara. Al usar la máscara, solo necesita hacer referencia a la máscara en el atributo de máscara del objeto.

El elemento de máscara puede contener cualquier elemento gráfico y elemento contenedor (por ejemplo, G).

De hecho, todos tienen claro el efecto de la máscara. Básicamente, es calcular una transparencia final basada en el color y la transparencia de cada punto en la máscara. Luego, al renderizar el objeto, se cubre una capa de máscara con una transparencia diferente en el objeto, lo que refleja el efecto de enmascaramiento de la máscara. Para la representación de objetos, solo las partes dentro de la máscara se representarán de acuerdo con la transparencia de los puntos en la máscara, y las partes fuera de la máscara no se mostrarán. Vea el siguiente ejemplo:

<SVG ViewBox = "0 0 800 300" Versión = "1.1"

xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">

<fs defs>

<linealgradient id = "gradiente" gradienteunits = "UserSpaceOnuse"

x1 = "0" y1 = "0" x2 = "800" y2 = "0">

<stop offset = "0" stop-color = "white" stop-opacity = "0" />

<stop offset = "1" stop-color = "white" stop-opacity = "1" />

</linealgradient>

<Mask id = "Mask" MaskUnits = "UserSpaceOnuse"

x = "0" y = "0">

<rect x = "0" y = "0" relleno = "url (#gradient)" />

</mask>

<text id = "text" x = "400" y = "200"

font-family = "verdana" font-size = "100" text-anchor = "Middle">

Texto enmascarado

</ext>

</defs>

<!-Los antecedentes de la ventana->

<rect x = "0" y = "0" relleno = "#ff8080" />

<!- ​​El primer paso es dibujar un texto con una máscara, y puede ver que el efecto de transparencia de la máscara se ha aplicado a las palabras.

El segundo paso es dibujar un texto sin una máscara como esquema del texto en el primer paso ->

<use xlink: href = "#text" relleno = "azul" máscara = "url (#mask)" />

<use xlink: href = "#text" relleno = "none" stroke = "negro" stroke-width = "2" />

</svg>

El efecto se muestra en la figura a continuación:

Puede intentar cambiar el ancho del elemento RECT en el elemento de máscara anterior a 500. Verá que la parte del texto no se muestra, porque esa parte ha excedido el alcance de la máscara. Como realmente puede ver aquí, la ruta de recorte de arriba es solo una máscara especial (la transparencia de cada punto es 0 o 1).

Se han introducido la definición y el uso de máscaras. Echemos un vistazo a varios atributos importantes:

Un sistema de coordenadas que define las coordenadas (x, y) y la longitud (ancho, altura) en un elemento de máscara: un sistema de coordenadas de usuario que se refiere al elemento de la máscara, o un valor relativo del cuadro delimitador en relación con el elemento de la máscara referenciada. El significado de este valor es el mismo que el significado de la unidad en el capítulo anterior.

Define el sistema de coordenadas de los elementos infantiles en el elemento de la máscara.

Se definen la posición y el tamaño de la máscara. Según las coordenadas predeterminadas de ObjectBoundingBox, los valores predeterminados son -10%, -10%, 120%y 120%.

Í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/