HTML5 SVG 2D Introdução 10 - Definição e uso de filtros

Autor：Eve Cole Data da Última Atualização：2025-04-04 01:00:03

Os filtros podem ser considerados a característica mais poderosa do SVG. Eles permitem adicionar efeitos de filtro que estão disponíveis apenas em software profissional aos gráficos (elementos gráficos e elementos de contêiner). Isso facilita para você gerar e modificar imagens no lado do cliente. Além disso, o filtro não destrói a estrutura do documento original, por isso também é muito sustentável.

Os filtros são definidos por elementos de filtro : Quando necessário, adicione atributos de filtro aos gráficos ou contêineres que requerem efeitos de filtro e consulte os filtros relevantes.

Os elementos do filtro contêm muitas operações atômicas de filtro; Cada operação atômica executa uma operação gráfica básica no objeto de entrada e produz saída gráfica. A maioria das operações atômicas gera resultados basicamente uma imagem RGBA. A entrada para cada operação atômica pode ser o gráfico de origem ou o resultado de outras operações atômicas. Portanto, o processo de citar o efeito do filtro é aplicar as operações atômicas do filtro relevante nos gráficos de origem e, finalmente, gerar um novo gráfico e renderizá -lo.

Ao usar o atributo do filtro em um contêiner (como um elemento G), o efeito do filtro será aplicado a todos os elementos do contêiner. No entanto, os elementos do contêiner não são renderizados diretamente na tela, mas são temporariamente armazenados. Os comandos gráficos são executados como parte do processo de processamento dos elementos do filtro referenciado e depois renderizar. Isso é especificado usando o SourceGraphic e o SourCealpha. Este efeito é demonstrado no terceiro caso no segundo exemplo abaixo.

Alguns efeitos de filtro gerarão pontos de pixels indefinidos, que serão processados em efeitos transparentes.

Vamos dar uma olhada em um exemplo:

<SVG ViewBox = "0 0 200 120"

xmlns = "http://www.w3.org/2000/svg" versão "1.1">

Exemplo de efeito de filtro SVG </title>

<cred> Use vários efeitos do filtro para obter efeitos de iluminação 3D de um par de gráficos. </cc>

<FS>

)

<FePecularLighting in = "Blur" Surfacescale = "5" SpecularConstant = ". 75"

especularexponente = "20" iluminação-color = "#bbbbbbb"

resultado = "specout">

</fpesecularLighting>

<fecomposite em = "fontegraphic" in2 = "specout" operator = "aritmética"

k1 = "0" k2 = "1" k3 = "1" k4 = "0" resultado = "litpaint"/>

</femerge>

</filter>

</defs>

<g>

<path preench = "nenhum" stroke = "#d90000" stroke-width = "10"

d = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />

<path prehfil = "#d90000"

d = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />

</g>

</svg>

O efeito deste exemplo em execução no Firefox é o resultado da última imagem:

Nota: Pode haver algumas diferenças em outros navegadores.

Este filtro usa 6 efeitos, por sua vez (a renderização de uma etapa é mostrada na figura acima :):

FegaussianBlur: Esta etapa é realizar processamento de desgaste gaussiano; A entrada desse efeito especial é o valor de transparência da imagem de origem e a saída é armazenada no desfoque buffer temporário. O valor do desfoque é usado como entrada do Feoffset e FePecularLighting abaixo.

Feoffset: Esta etapa é traduzir a imagem em algumas posições; A entrada desse efeito é o Blur gerado na etapa anterior, gerando um novo cache offsetBlur.

Fespecular Lighting: Esta etapa é processar a superfície da imagem com luz. A entrada é o desfoque gerado na primeira etapa e a saída é armazenada no novo cache Specout.

Duas vezes o Fecomposite: essas duas etapas estão combinando diferentes camadas de cache.

FEMERGE: Esta etapa é mesclar camadas diferentes. Esta etapa é geralmente a etapa final, fundindo as camadas de cada cache, gerando a imagem final e fazendo -a. Embora essa etapa possa ser concluída com efeitos especiais Fecompostos várias vezes, ainda não é muito conveniente.

Elemento de filtro e área de efeito de filtro

A área de efeito de filtro refere -se à área onde o efeito do filtro funciona. O tamanho desta área é definido pelas seguintes propriedades do elemento de filtro:

Filterunits = UserspaceOnuse | ObjectBoundingBox

Esta propriedade define o espaço de coordenadas usado por x, y, largura e altura. Como outras propriedades relacionadas à unidade, essa propriedade possui dois valores: UsersPaceOnuse e ObjectBoundingBox (padrão).

UsersPaceOnuse representa o sistema de coordenadas do usuário que usa o elemento que faz referência ao elemento de filtro.

ObjectBoundingBox significa usando a porcentagem da caixa delimitadora que faz referência ao elemento de filtro como o intervalo de valor.

x, y, largura, altura

Essas propriedades definem a área retangular onde o filtro funciona. O efeito do filtro não será aplicado a pontos além desta área. O valor padrão de x, y é -10%e o valor padrão de largura e altura é de 120%.

filtros

Esta propriedade define o tamanho da área de cache intermediário, para que também defina a qualidade da imagem em cache. Normalmente, esse valor não é necessário e o navegador seleciona o próprio valor apropriado. Geralmente, a área de efeito de filtro deve ser definida para corresponder exatamente ao ponto de fundo e ao ponto um por um, o que trará certas vantagens de eficiência.

Além dessas propriedades, as seguintes propriedades do elemento de filtro também são importantes:

PrimitiveUnits = UserspaceOnuse | ObjectBoundingBox

Esta propriedade define o espaço de coordenadas usado por coordenadas e comprimentos em cada operação atômica. O valor desta propriedade é o UsuáriosPaceOnuse e o ObjectBoundingBox. Mas o valor padrão é o userspaceOnuse.

xlink: href = <ri>

Esta propriedade é usada para se referir a outros elementos de filtro no elemento de filtro atual.

Vale ressaltar que o elemento de filtro herdará apenas os atributos de seu nó pai e não herdará os atributos do elemento que referencia o elemento de filtro.

Visão geral do filtro

As várias operações atômicas do filtro não serão descritas em detalhes. Você pode apenas verificar os documentos oficiais quando necessário. Vamos dar uma olhada nas semelhanças dessas operações. Exceto pelo atributo IN, os outros atributos abaixo estão disponíveis para todas as operações atômicas.

x, y, largura, altura

Não vou dizer muito sobre essas propriedades. Eles definem a área onde os átomos do filtro funcionam, para que possa se tornar a área de filtro. Esses atributos são limitados pela área de ação do elemento do filtro. Por padrão, os valores são 0, 0, 100% e 100%, respectivamente. A região de ação desses átomos excede a do elemento de filtro não funciona.

resultado

Armazene os resultados desta etapa. Após especificar o resultado, outras operações subsequentes do mesmo elemento de filtro podem ser especificadas como entrada usando. Você saberá disso se referindo ao exemplo acima. Se esse valor for omitido, ele só poderá ser usado como entrada implícita para a próxima etapa seguinte. Observe que, se a próxima etapa da próxima etapa já tiver especificado a entrada com in, o especificado na próxima etapa prevalecerá.

Indica a entrada para esta etapa. Se o atributo IN for omitido, o resultado da etapa anterior será usado por padrão como a entrada desta etapa. Se a etapa IN for omitida, a fonte do GrOUD será usada como o valor (consulte a descrição abaixo). O atributo IN pode se referir ao valor armazenado no resultado anterior ou especificar os 6 valores especiais a seguir :

SourceGraphic: este valor representa a entrada para usar o elemento gráfico atual como operação.

SourCealpha: Este valor representa a entrada para usar o valor alfa do elemento gráfico atual como operação.

BackgroundImage: Este valor representa o uso da captura de tela de segundo plano atual como entrada para a operação.

BackgroundAlpha: Este valor representa a entrada da operação usando o valor alfa de captura de tela de fundo atual.

FillPaint: Este valor usa o valor do atributo de preenchimento do elemento gráfico atual como entrada para a operação.

StrokePaint: Este valor usa o valor do atributo AVC do elemento gráfico atual como entrada para a operação.

Entre esses valores, o BackgroundImage e o BackgroundAlpha podem ser difíceis de entender. Vamos dar uma olhada nesses dois valores abaixo.

Acesse a captura de tela de fundo

Normalmente, podemos usar diretamente a captura de tela em segundo plano do elemento que faz referência ao elemento do filtro como a imagem de origem do efeito do filtro. Os valores que representam essa entrada são o BackgroundImage e o BackgroundAlpha, o anterior contém os valores de cor e alfa, e o último contém apenas os valores alfa. Para suportar esse uso, também é necessário ativar explicitamente esse recurso no elemento que faz referência ao elemento do filtro, que requer a definição da propriedade Ativar-background do elemento.

Ativar-background = acumular | Novo [<x> <y> <width> <tight>] | herdar

Essa propriedade só pode ser usada para elementos de contêiner e define como tirar capturas de tela em segundo plano.

O novo valor representa: permite que os elementos filhos do contêiner acessem a captura de tela de segundo plano do contêiner, e os elementos filhos do contêiner são renderizados no plano de fundo e no dispositivo.

acumulado é o valor padrão e seu efeito depende do contexto: se o elemento de contêiner pai usa Ativar-background: novo, todos os elementos gráficos do contêiner participarão da renderização do plano de fundo. Caso contrário, isso significa que o contêiner pai não está pronto para tirar uma captura de tela em segundo plano, e a exibição do elemento gráfico desse elemento é exibida apenas no dispositivo.

O exemplo a seguir demonstra o efeito desses valores:

<SVG ViewBox = "0 0 1350 270"

xmlns = "http://www.w3.org/2000/svg" versão "1.1">

<title> Exemplo de usar capturas de tela em segundo plano </title>

<cred> Os seguintes exemplos explicam o uso de capturas de tela de fundo em diferentes situações </cred>

<FS>

<filtro id = "shiftbgandblur"

Filterunits = "UserspaceOnuse" x = "0" y = "0">

<cec> Este filtro descarta a imagem de origem, mas usa capturas de tela em segundo plano </cred>

</filter>

<filtro id = "shiftbgandblur_withsourcegraphic"

Filterunits = "UserspaceOnuse" x = "0" y = "0">

<cec> este filtro Efeito Especial combina capturas de tela e imagens de fundo do elemento atual </cred>

</femerge>

</filter>

</defs>

<cred> A primeira foto é o efeito de não adicionar um filtro </cred>