borrão SVG - Gaussian Blur
Nota: O Internet Explorere Safari não suporta filtros SVG!
<Defs> e <filter>
SVG filtra todo o Internet definida em <defs> elemento. <Defs> define curto e contém elementos especiais (como filtros) definição.
<Filter> tag é usada para definir o filtro SVG. <Filter> tag com o atributo id necessária para definir a aplicação gráfica que filtra?
SVG <feGaussianBlur>
exemplo 1
<FeGaussianBlur> elemento é usado para criar um efeito de borrão:
Aqui está o código SVG:
Exemplos
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
tente »
Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).
análise de código:
- O único nome <filter> atributo do elemento id define um filtro
- <FeGaussianBlur> define borrão
- in = "SourceGraphic" Esta seção define o efeito criado por toda a imagem
- atributo desvioPadrão define a quantidade de desfoque
- Filtro de Propriedades <rect> elemento é usado para ligar os elementos de filtro "f1"