sombra SVG
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 <feOffset>
exemplo 1
<FeOffset> é utilizado para criar um efeito de sombra. A ideia é levar gráficos SVG (ou elementos de imagem) e movê-lo um pouco no plano xy.
O primeiro exemplo compensar um retângulo (com <feOffset>), e depois misturado topo offset da imagem (incluindo <feBlend>):
Aqui está o código SVG:
Exemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</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
- Filtro de Propriedades <rect> elemento é usado para ligar os elementos de filtro "f1"
exemplo 2
Agora, você pode deslocar a imagem torna-se turva (contendo <feGaussianBlur>):
Aqui está o código SVG:
Exemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</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:
- desvioPadrão <feGaussianBlur> propriedade do elemento define a quantidade de desfoque
exemplo 3
Agora faça uma sombra negra:
Aqui está o código SVG:
Exemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</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:
- Propriedades <feOffset> elemento para "SourceAlpha" uso borrão no canal Alpha, em vez de todo o pixels RGBA.
exemplo 4
Sombra está agora revestido com uma cor:
Aqui está o código SVG:
Exemplos
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</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:
- Filtro <FeColorMatrix> Offset é usado para converter uma imagem para torná-lo mais perto da cor preta. '0,2' para se obter três valores são multiplicados por uma matriz de canais de cor vermelho, verde e azul. Reduzindo seu valor para trazer cor para preto (preto é 0)