<Defs> e <filter>
Todos os filtros de internet 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 <feGaussianBlur>
exemplo 1
O <feGaussianBlur> elemento é usado para criar efeitos de blur:
Aqui está o código SVG:
Exemplo
<svg height="110" width="110">
<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 você mesmo " Code explanation:
- O id atributo do <filter> elemento define um nome exclusivo para o filtro
- O efeito de borrão é definido com o <feGaussianBlur> elemento
- A in="SourceGraphic" parte define que o efeito é criado para todo o elemento
- O stdDeviation atributo define o valor do desfoque
- O filter atributo do <rect> elemento de liga o elemento para o "f1" filtro