<Defs> e <filter>
Todos os filtros SVG são definidos dentro de um <defs> elemento. O <defs> elemento é curto para definições e contém definição de elementos especiais (such as filters) .
O <filter> elemento é usado para definir um filtro SVG. O <filter> elemento tem um atributo id obrigatório que identifica o filtro. O gráfico em seguida, aponta para o filtro a ser usado.
SVG <feOffset>
exemplo 1
O <feOffset> elemento é usado para criar efeitos de sombra. A idéia é fazer um gráfico SVG (image or element) e movê-lo um pouco no plano xy.
O primeiro exemplo compensa um retângulo (with <feOffset>) , em seguida, misturar o original no topo do deslocamento da imagem (with <feBlend>) :
Aqui está o código SVG:
Exemplo
<svg height="120" width="120">
<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 você mesmo " Code explanation:
- O id atributo do <filter> elemento define um nome exclusivo para o filtro
- O filter atributo do <rect> elemento de liga o elemento para o "f1" filtro
exemplo 2
Agora, o deslocamento da imagem pode ficar desfocada (with <feGaussianBlur>) :
Aqui está o código SVG:
Exemplo
<svg height="140" width="140">
<defs>
<filter id="f2" 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(#f2)" />
</svg>
Tente você mesmo " Code explanation:
- O stdDeviation atributo do <feGaussianBlur> elemento define o montante do borrão
exemplo 3
Agora, fazer a sombra negra:
Aqui está o código SVG:
Exemplo
<svg height="140" width="140">
<defs>
<filter id="f3" 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(#f3)" />
</svg>
Tente você mesmo " Code explanation:
- O in atributo do <feOffset> elemento é alterado para "SourceAlpha" que utiliza o canal Alpha para o borrão em vez de todo o pixel RGBA
exemplo 4
Agora, tratar a sombra como uma cor:
Aqui está o código SVG:
Exemplo
<svg height="140" width="140">
<defs>
<filter id="f4" 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(#f4)" />
</svg>
Tente você mesmo " Code explanation:
- A <feColorMatrix> filtro é usado para transformar as cores na imagem compensado mais perto de preto. Os três valores de '0,2' na matriz se tudo multiplicado pelos canais vermelho, verde e azul. Reduzindo seus valores traz as cores mais próximas do preto (black is 0)