Filtro <filter> SVG

O elemento <filter> do SVG é usado para adicionar efeitos bonitos a imagens SVG. Por exemplo, sombras, borrão ou brilho.

Exemplo de filtro

Este é um exemplo simples de filtro SVG, onde são mostradas duas elipses. A elipse esquerda não usa filtro, enquanto a direita é renderizada com o filtro de borrão gaussiano:

<svg　width="500"　height="100">
<defs>
　　　　　　<filter　id="blurFilter"　y="-5"　height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3"　y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:　none;　fill:　#0000ff;　"　/>
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none;　fill:#0000ff;　filter:url(#blurFilter);"　/>
</svg>

Efeito da imagem após a execução:

Observe como a borda do elíptico direito se torna borrada.

Entrada e saída do filtro

O filtro SVG precisa de algum input (fonte) e aplica o efeito de filtro nele. A entrada pode ser a gráfica da forma (representando cores RGB), a Alpha channel da forma ou a saída de outro filtro.

O filtro SVG gera uma saída gráfica a partir da entrada (resultado). Esta saída geralmente é exibida, em vez de aplicar o filtro à forma. A saída do filtro pode ser usada como entrada para outro filtro. Portanto, os filtros podem ser ligados.

Este é um gráfico de entrada e saída do filtro SVG:

A entrada do filtro SVG, geralmente especificada no atributo do elemento de filtro in. Este é um exemplo:

　<feGaussianBlur stdDeviation="3" in="SourceGraphic"　/>

Se você quiser usar a saída do filtro SVG como entrada para outro filtro, é necessário adicionar o atributo ao elemento de filtro result. Este é um exemplo:

<feGaussianBlur stdDeviation="3" in="SourceGraphic" result="blur"/>

Agora, outro filtro SVG pode usar a saída deste filtro, inserindo o valor blur em seu atributo in. No exemplo acima, o valor blur está especificado no atributo result do filtro.

Tamanho do filtro

O tamanho de um filtro é definido pelos atributos x, y, width e height.

Os atributos x e y são interpretados em relação aos x e y da forma usada como entrada. Devido ao fato de que a saída de alguns filtros geralmente é maior que a entrada (por exemplo, adicionar suavização ao redor da forma), geralmente é necessário usar números negativos para x e y para evitar cortar a gráfica adicionada pelo filtro.

Também é simples para os atributos width e height. Além disso, às vezes pode ser necessário especificar uma largura e altura, que devem ser maiores que a forma de entrada, para evitar que o efeito do filtro adicionado seja truncado.

filtros de combinação

Você pode usarFiltro de combinação de elementos. Este é um exemplo:

<svg　width="500"　height="100">
<defs>
　　　　<filter　id="blurFilter2"　y="-10"　height="40"　x="-10" width="150">
　　　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset2"　/>
　　　　　　　　<feGaussianBlur　in="offset2"　stdDeviation="3"　　result="blur2"/>
　　　　　　　　feMerge>
　　　　　　　　　　　　<feMergeNode in="blur"2"　/>
　　　　　　　　　　　　<feMergeNode in="SourceGraphic"　/>
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);"　/>　
</svg>

Este exemplo cria um filtro SVG que contém dois elementos de filtro: <feOffset> e <feGaussianBlur>. O efeito de deslocamento do filtro (feOffset) atua na Alpha channel da forma aplicada. O efeito de suavização gaussiana (feGaussianBlur) atua na saída do filtro de deslocamento.

O elemento <feMerge> combina a saída do filtro desfocado com a imagem original. As entradas são combinadas na ordem em que aparecem no elemento <feMerge>. Portanto, as entradas posteriores são exibidas sobre as entradas anteriores. O resultado é que a forma da imagem parece ter uma sombra. O efeito da imagem após a execução é:

Filtro de desfoque gaussiano

O filtro de desfoque gaussiano SVG pode desfigurar formas SVG. O filtro de desfoque gaussiano é composto porO elemento <feGaussianBlur> representa. Este é um exemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter4" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);"　/>
</svg>

Este exemplo define um <filter> interno com <feGaussianblur>. Em seguida, o exemplo define um retângulo verde que faz referência ao filtro através da propriedade CSS filter. Abaixo está a imagem gerada:

Tamanho do desfoque

O atributo stdDeviation do elemento <feGaussianBlur> determina o grau de desfoque da forma para o qual o filtro será aplicado. Quanto maior o número, mais desfocada a forma fica. Abaixo estão três exemplos com diferentes valores de stdDeumation:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter5" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="2"　/>
　　　　</filter>
　　　　<filter　id="blurFilter6" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="6"　/>
　　　　</filter>
　　　　<filter　id="blurFilter7" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="12"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);"　/>
<rect　x="150"　y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);"　/>
<rect　x="300" y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);"　/>
</svg>

Efeito da imagem após a execução:

Observe como a forma se torna cada vez mais desfocada, aplicando valores mais altos no atributo stdDeumation do filtro.

Desfoque do canal Alfa

O exemplo acima usa SourceGraphic como entrada, o que significa que a cor RGB da forma é usada como entrada do filtro. Você pode optar por usar o canal Alfa da forma como entrada, configurando o valor SourceAlpha na propriedade in do elemento <feGaussianBlur>. Abaixo está um exemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter8" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceAlpha" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);"　/>　
</svg>

Efeito da imagem após a execução:

Atenção, mesmo que a forma seja definida com preenchimento verde, a saída do filtro é preto e branco. Isso ocorre quando o filtro de desfoque gaussiano é aplicado ao canal Alfa em vez do canal RGB (RGB).

Filtro de deslocamento

O filtro de deslocamento aceita uma entrada e move a entrada na saída. Isso significa que ele pode mover a forma para cima, para baixo, para a esquerda e para a direita. Portanto, ele funciona de maneira semelhante à transformação, mas é realizado dentro do filtro. Abaixo está um exemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter id="offsetFilter1" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feOffset　in="SourceGraphic"　dx="80"　dy="20"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　filter:　url(#offsetFilter1);"　/>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　"　/>
</svg>

Este exemplo define dois retângulos idênticos na mesma posição. Um dos retângulos aplica o filtro de deslocamento, que o move para baixo e para a direita.

Efeito da imagem após a execução.

O filtro de deslocamento parece ter outros efeitos na forma (algum tipo de desfoque), mas não estou certo por que isso acontece. Até agora, não consegui encontrar nenhuma explicação sobre por que isso acontece.

Filtro de matriz de cores

O filtro de matriz de cores pode aplicar transformações de matriz à cor das formas. Este é um exemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="colorMatrixFilter1" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feColorMatrix　in="SourceGraphic"　type="matrix"
　　　　　　　　　　　　　　　　values="0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#0000ff;　filter:　url(#colorMatrixFilter1);"　/>
</svg>

Os valores da matriz são fornecidos na propriedade values do elemento <feColorMatrix>. No total, devem haver4 x 5=20 valores. Esses valores serão aplicados à cor da forma original, conforme mostrado a seguir:

　0　0　0　red　　　0
　0　0　0　green　0
　0　0　0　blue　　0
　0　0　0　1　　　　　0

Efeito da imagem após a execução:

Atenção: Os resultados dos filtros de matriz de cores no Chrome e no Firefox são um pouco estranhos. O retângulo acima é especificado pela cor de preenchimento, mas logo após o filtro de matriz de cores completar seu trabalho, apenas o contorno restará.

Filtros de mistura

Filtros de mistura podem combinar a entrada de vários filtros em uma única. Este é um exemplo:

<svg　width="500"　height="250">
　　<defs>
　　　　<filter　id="blurFilter3"　y="-10"　height="40"　x="-10" width="150">
　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset3"　/>
　　　　　　<feGaussianBlur　in="offset3"　stdDeviation="3"　　result="blur3"/>
　　　　　　<feBlend in="SourceGraphic" in}}2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);"　/>
</svg>

Este exemplo declara um que usa3um filtro que aplica vários efeitos de filtro. Os dois primeiros são o offset linkado e o efeito de suavização gaussiana. O terceiro éPrecisa de dois inputs (in e in2）e combiná-los em um efeito.

O efeito gerado é muito semelhante ao obtido com o filtro de combinação mencionado anteriormente no texto.