HTML5 SVG 2D Introdução 9 - Introdução e aplicação de máscaras e elementos de máscara

O SVG suporta uma variedade de efeitos de máscara. Usando esses recursos, podemos criar muitos efeitos deslumbrantes. Quanto a se a máscara é chamada de máscara ou máscara em chinês, ela não é diferenciada. É chamado de máscara aqui.

Os tipos de máscaras suportadas pelo SVG:

1. Caminho de recorte

Um caminho de recorte é um gráfico composto de caminho, texto ou gráfico básico. Todos os gráficos dentro do caminho do clipe são visíveis e todos os gráficos fora do caminho do clipe são invisíveis.

2. Máscara/máscara

Uma máscara é um recipiente que define um conjunto de gráficos e os usa como um meio translúcido que pode ser usado para combinar objetos e fundos em primeiro plano.

Uma diferença importante entre um caminho de recorte e outras máscaras é que o caminho de recorte é uma máscara de 1 bit, o que significa que o objeto coberto pelo caminho de recorte é totalmente transparente (visível, localizado dentro do caminho de recorte) ou completamente opaco (não é visível, localizado fora do caminho de corte). E a máscara pode especificar transparência em diferentes locais.

O atributo de transbordamento e o atributo clipe do elemento HTML definem conjuntamente o comportamento de recorte do elemento para o conteúdo. Da mesma forma, no SVG, essas duas propriedades também podem ser usadas.

O atributo de transbordamento define o comportamento adotado quando o conteúdo de um elemento excede a borda do elemento.

Essa propriedade pode ser usada para elementos (SVG, símbolo, imagem, ForeignObject), elementos de padrão e marcador que podem criar novas janelas. O valor desta propriedade é o seguinte:

Visível: exibe todo o conteúdo, mesmo que o conteúdo já esteja fora da borda do elemento, esse é o valor padrão.

Oculto: ocultar conteúdo além do caminho de recorte. O caminho do clipe é especificado pela propriedade CLIP.

Rolagem: na forma de uma barra de rolagem, apresentando o conteúdo além dela.

Auto: Usando o comportamento definido pelo navegador, isso parece não confiável.

Esta propriedade é basicamente a mesma que a propriedade de mesmo nome no CSS2, exceto que no SVG, existem alguns procedimentos diferentes de processamento:

1. O atributo de transbordamento não tem efeito em outros elementos que não os elementos que criam uma nova janela (SVG, símbolo, imagem, objeto estrangeiro), elementos de padrão e marcador.

2. O caminho de recorte corresponde à janela. Se uma nova janela for criada, um novo caminho de recorte será criado. O caminho de recorte padrão é o limite da janela.

A propriedade CLIP é usada para definir o caminho do clipe da janela atual.

Essa propriedade pode ser usada para elementos (SVG, símbolo, imagem, ForeignObject), elementos de padrão e marcador que podem criar novas janelas. Esta propriedade possui os mesmos parâmetros que a propriedade com o mesmo nome no CSS2. Auto significa que o caminho de recorte é consistente com a borda da janela. Ao usar o gráfico como um parâmetro (definindo os valores de cima, direita, inferior e esquerda do retângulo de colheita), o valor de coordenada do usuário (ou seja, coordenadas sem unidades) pode ser usado. Por exemplo:

P {clipe: ret (5px, 10px, 10px, 5px); }

Observe aqui que, por padrão (estouro e clipe, são ambos valores padrão), o caminho do clipe é consistente com a borda da janela. Depois de definir o ViewBox e o PreserveasPetratio, você geralmente precisa mapear os quatro lados do caminho do clipe nos quatro lados da caixa de vista para garantir que alguns efeitos de exibição sejam os mesmos (é claro, se todos forem valores padrão, você não precisa defini -los).

O caminho do clipe é definido usando o elemento Clippath e, em seguida, referenciado usando o atributo CLIP-PATH.

Clippath pode conter elementos do caminho, elementos de texto, elementos gráficos básicos (círculo, etc.) e usar elementos. Se for um elemento de uso, ele deve consultar diretamente o caminho, o texto ou os elementos gráficos básicos, e outros elementos não podem ser referenciados.

Observe que o caminho de recorte é apenas uma camada de máscara de um bit, que é uma união de todos os elementos contidos. Os objetos nesta coleção podem ser exibidos e os objetos que não estão dentro desse intervalo não serão exibidos. O algoritmo com o ponto de julgamento específico não dentro do intervalo é especificado pelo atributo CLIP-Rule.

Para objetos gráficos, o caminho do clipe é igual à união do caminho do clipe definido por si só com os caminhos de clipe de todos os elementos externos (incluindo caminhos de clipe definidos por clipe e transbordamento). Alguns pontos a serem observados:

1. O próprio elemento Clippath não herda o caminho do clipe definido por Clippath do nó externo.

2. O próprio elemento Clippath pode definir o atributo Clip-Path. O efeito é a interseção de dois caminhos.

3. O atributo de clipe pode ser definido para os elementos filhos do elemento Clippath: o efeito é uma união de dois caminhos.

4. Um caminho de recorte vazio cortará todo o conteúdo do elemento.

Aqui estão alguns atributos importantes:

Este atributo define o sistema de coordenadas usado pelo elemento Clippath. Estamos familiarizados com esses dois valores, a saber, o sistema de coordenadas do usuário que usa o elemento que faz referência ao caminho do clipe atual e ao valor proporcional da caixa delimitadora.

O elemento Clippath nunca é renderizado diretamente e é referenciado através do clipe, portanto, definir o atributo de exibição do elemento Clippath não tem efeito.

Escusado será dizer que esse atributo é usado para se referir ao caminho de recorte. Deve -se notar aqui que todos os elementos de contêiner, elementos gráficos básicos e elementos Clippath podem usar esse atributo.

Esta propriedade é usada para determinar quais pontos pertencem aos pontos dentro da força de recorte. É fácil julgar por gráficos fechados simples, mas para gráficos complexos com buracos dentro, há uma diferença. O valor desta propriedade tem o mesmo significado que o valor da regra de preenchimento:

NECENDENTES: O algoritmo usado para esse valor é emitir linhas do ponto a ser julgado em qualquer direção e calcular a direção do ponto de interseção entre a figura e o segmento de linha; O resultado do cálculo começa de 0, e todo segmento de linha em um cruzamento é da esquerda para a direita, adicione 1; Todo segmento de linha em um cruzamento é da direita para a esquerda, subtraindo 1; Depois de calcular todos os pontos de interseção dessa maneira, se o resultado desse cálculo não for igual a 0, o ponto está na figura e precisar ser preenchido; Se o valor for igual a 0, ele não precisará ser preenchido fora da figura. Veja o seguinte exemplo:

EvenODD: O algoritmo usado para esse valor é emitir linhas do ponto que precisa ser julgado em qualquer direção e calcular o número de pontos em que a figura e o segmento de linha se interseção. Se o número for ímpar, o ponto será alterado para a figura e precisará ser preenchido; Se o número for par, o ponto está fora da figura e não precisará ser preenchido. Veja o exemplo na figura abaixo:

O atributo CLIP-RULE só pode ser usado para elementos gráficos internos do elemento Clippath. Por exemplo, as seguintes configurações funcionam:

<g>

<clippath id = "myClip">

<caminho d = "..." clip-rule = "evenodd" />

</clippath>

<Rect clip-pat = "url (#myclip)" ... />

</g>

Não funciona se o elemento não estiver em Clippath. Por exemplo, as seguintes configurações não funcionam:

<g clip-rule = "pouco de zero">

<clippath id = "myClip">

<caminho d = "..." />

</clippath>

<Rect clip-pat = "url (#myclip)" clip-rule = "parodd" ... />

</g>

Por fim, vamos olhar para um pequeno exemplo do caminho de recorte:

<Svg>

<g>

<clippath id = "myClip">

<caminho d = "m 10,10 L 10,20 L 20,20 L 20,10 z" clip-rule = "parodd" />

</clippath>

</g>

<Rect clip-pat = "url (#myclip)" x = "10" y = "10" preench = "vermelho" />

</svg>

Somente a área do canto superior esquerdo do retângulo é visível.

No SVG, você pode atribuir qualquer elemento gráfico ou g como uma máscara ao objeto renderizado para combinar o objeto renderizado no plano de fundo.

A máscara é definida pelo elemento de máscara. Ao usar a máscara, você só precisa fazer referência à máscara no atributo máscara do objeto.

O elemento máscara pode conter qualquer elemento gráfico e elemento do contêiner (por exemplo, G).

De fato, todos são claros sobre o efeito da máscara. Basicamente, é calcular uma transparência final com base na cor e na transparência de cada ponto da máscara. Então, ao renderizar o objeto, uma camada de máscara com transparência diferente é coberta no objeto, refletindo o efeito de mascaramento da máscara. Para renderizar objetos, apenas as peças dentro da máscara serão renderizadas de acordo com a transparência dos pontos da máscara, e as peças fora da máscara não serão exibidas. Veja o seguinte exemplo:

<SVG ViewBox = "0 0 800 300" versão = "1.1"

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

<FS>

<lineargradient 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" />

</linearGradient>

<máscara id = "Mask" Maskunits = "UserspaceOnuse"

x = "0" y = "0">

<ret X = "0" y = "0" preench = "url (#gradiente)" />

</máscara>

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

font-family = "verdana" font-size = "100" text-âncor = "meio">>

Texto mascarado

</sext>

</defs>

<!-o fundo da janela->

<ret X = "0" y = "0" preench = "#ff8080" />

<!- ​​O primeiro passo é desenhar um texto com uma máscara, e você pode ver que o efeito da transparência da máscara foi aplicado às palavras.

O segundo passo é desenhar um texto sem uma máscara como o contorno do texto na primeira etapa ->

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

<Use xlink: href = "#text" preench = "nenhum" stroke = "preto" stroke-width = "2" />

</svg>

O efeito é mostrado na figura abaixo:

Você pode tentar alterar a largura do elemento RECT no elemento de máscara acima para 500. Você verá que parte do texto não é exibida, porque essa parte excedeu o escopo da máscara. Como você pode realmente ver aqui, o caminho de recorte acima é apenas uma máscara especial (a transparência de cada ponto é 0 ou 1).

A definição e o uso de máscaras foram introduzidos. Vamos dar uma olhada em vários atributos importantes:

Um sistema de coordenadas que define coordenadas (x, y) e comprimento (largura, altura) em um elemento de máscara: um sistema de coordenadas do usuário que se refere ao elemento da máscara ou um valor relativo da caixa delimitadora em relação ao elemento da máscara referenciada. O significado desse valor é o mesmo que o significado da unidade no capítulo anterior.

Define o sistema de coordenadas dos elementos filhos no elemento máscara.

A posição e o tamanho da máscara são definidos. Sob as coordenadas padrão do ObjectBoundingBox, os valores padrão são -10%, -10%, 120%e 120%.

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de Desenvolvimento: https://developer.mozilla.org/en/svg

Referência popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/