Esta página foi útil?
Seus comentários sobre este conteúdo são importantes. Queremos saber sua opinião.
Comentários adicionais?
1500 caracteres restantes
Exportar (0) Imprimir
Expandir Tudo

Efeitos de filtro

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript introduzem suporte a efeitos de filtro SVG (Elementos Gráficos Vetoriais Escaláveis). Os filtros SVG permitem manipular elementos gráficos — assim como é possível em aplicativos como o Adobe Photoshop — diretamente no navegador. Considere o elemento gráfico SVG a seguir.

Logotipo SVG

Usando elementos de filtro SVG, esse elemento gráfico simples pode ser facilmente transformado em um formato muito mais atraente visualmente.

Logotipo SVG com elementos de filtro aplicados

Ambas as imagens foram extraídas diretamente do exemplo de filtro da especificação de SVG do W3C. Vamos analisar profundamente este exemplo canônico. O primeiro elemento gráfico é simplesmente dois caminhos SVG e o texto"SVG", e é renderizado com a marcação a seguir.


<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" /> 
        <!-- Outer hollow area. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> 
        <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> 
    <!-- The text "SVG". -->
  </g>
</g>


Para aplicar um efeito de filtro SVG  neste grupo <g>, defina um filtro, nomeie-o (como MyFilter) e aplique-o ao grupo como se segue.


<g filter="url(#MyFilter)">
  <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" /> <!-- Outer hollow arena. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> <!-- The "SVG" text. -->
  </g>
</g>


Para entender o filtro que foi usado para criar o efeito na segunda imagem, vamos dar uma olhada no exemplo completo. Observe que este exemplo foi modificado ligeiramente em relação ao original para funcionar dentro de um documento HTML5 (em vez de um documento SVG).


<!DOCTYPE html>
<html><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example filters01.svg - introducing filter effects</title>
</head><body>
  <svg width="7.5cm" height="5cm" viewBox="0 0 200 120">
    <desc>An example that combines multiple filter primitives
          to produce a 3D lighting effect on a graphic. The graphic contains the
          string "SVG" sitting on top of an oval filled in red
          and surrounded by an oval outlined in red.</desc>
    <defs>
      <filter id="MyFilter" filterUnits="userSpaceOnUse">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
        <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
        <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                            specularExponent="20" lighting-color="#bbbbbb"  
                            result="specOut">
          <fePointLight x="-5000" y="-10000" z="20000"/>
        </feSpecularLighting>
        <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
        <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                     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" width="198" height="118" fill="#888888" 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 fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
          <text x="52" y="76">SVG</text>
        </g>
      </g>
    </g>
  </svg>
</body></html>


Primeiramente, devemos criar um visor de SVG  que tenha unidades de usuário e tamanho apropriados.


<svg width="7.5cm" height="5cm" viewBox="0 0 200 120">

Em seguida, nomearemos o filtro usando o atributo id.


<filter id="MyFilter" filterUnits="userSpaceOnUse">

Esse filtro consiste em seis primitivas de filtro numeradas (cinco das quais são exclusivas):

1. feGaussianBlur
2. feOffset
3. feSpecularLighting
4. feComposite
5. feComposite
6. feMerge

As primitivas de filtro podem ser encadeadas para criar efeitos muito complexos, permitindo que a saída de uma primitiva se torne a entrada de outra. Por exemplo, a saída de feGaussianBlur (result="blur") se torna a entrada para feOffset (in="blur").

Esteja ciente de que a palavra-chave SourceGraphic representa a imagem original à qual o filtro é aplicado. Nesse caso, a imagem de origem é tudo dentro do elemento <g>.


<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 fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
      <text x="52" y="76">SVG</text>
    </g>
  </g>
</g>


Além disso, a palavra-chave SourceAlpha representa o canal alfa do elemento gráfico de origem. O canal alfa representa tipicamente as informações de transparência associadas a um elemento gráfico. Esse componente do elemento gráfico de origem é o que é alimentado para a primeira primitiva de filtro, feGaussianBlur, conforme mostrado no fluxograma a seguir.

Fluxograma de SVG

As seis principais etapas para o filtro estão numeradas no fluxograma anterior e são explicadas aqui:

  1. A primitiva de filtro feGaussianBlur recebe a entrada SourceAlpha, que é o canal alfa do elemento gráfico de origem. O resultado é armazenado em um buffer temporário chamado "blur". Esteja ciente de que blur é usado como entrada para as primitivas de filtro #2 e #3.
  2. A primitiva de filtro feOffset recebe o buffer blur, desloca o resultado na direção x e y positiva por 4 pixels e cria um novo buffer chamado "offsetBlur". Esse buffer é usado posteriormente para criar um efeito de sombra.
  3. A primitiva de filtro feSpecularLighting usa o buffer "blur" como um modelo de elevação de superfície e gera um efeito de iluminação de uma única origem de ponto. O resultado é armazenado no buffer "specOut".
  4. A primitiva de filtro feComposite mascara o resultado da primitiva de filtro #3 pelo canal alfa do elemento gráfico original, para que o resultado intermediário não seja maior do que o do elemento gráfico original. O nome do buffer "specOut" é usado novamente para armazenar o resultado.
  5. A primitiva de filtro feComposite combina o resultado da iluminação especular com o elemento gráfico original. O resultado é colocado no buffer "litPaint".
  6. A primitiva de filtro feMerge combina duas camadas juntas. A camada inferior consiste no resultado de sombra da primitiva de filtro #2. A camada superior consiste na iluminação especular que resulta da primitiva de filtro #5. Se isso parece invertido, lembre-se de que o último elemento SVG é renderizado sobre todos os elementos SVG renderizados anteriormente.

Como o exemplo anterior mostra, os filtros SVG podem ser usados para criar elementos gráficos complexos facilmente no navegador. E como os filtros SVG podem ser controlados através de JavaScript, eles fornecem a capacidade para dois desenvolvedores da Web criarem aplicativos sofisticados, orientados por elementos gráficos, e interfaces do usuário que fornecem aos usuários finais experiências agradáveis, fluidas e animadas (através de JavaScript).

Referência de API

SVG Element Reference (os efeitos de filtro começam com "fe")

Amostras e tutoriais

Exemplo de efeitos de filtro SVG
Como combinar duas imagens de varredura usando filtros SVG

Demonstrações do Test Drive do Internet Explorer

Prática: efeitos de filtro SVG

Postagens no blog do IE

Efeitos de filtros SVG no IE10

Especificação

SVG (Elementos Gráficos Vetoriais Escaláveis) 1.1 (Segunda Edição): Seção 15

 

 

Mostrar:
© 2015 Microsoft