Effetto sfocatura SVG

<defs> e <filter>

Tutti i filtri SVG sono definiti in <defs> è definito nell'elemento.<defs> L'elemento è l'abbreviazione di definitions, che contiene definizioni di elementi speciali (ad esempio, filtri).

<filter> L'elemento viene utilizzato per definire i filtri SVG.<filter> L'elemento ha un attributo id obbligatorio, utilizzato per identificare il filtro. Poi il grafico si riferisce al filtro da utilizzare.

SVG <feGaussianBlur>

Esempio 1

<feGaussianBlur> L'elemento viene utilizzato per creare l'effetto sfocatura:

Questo è il codice SVG:

<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>

Prova personalmente

Spiegazione del codice:

• L'attributo id dell'elemento <filter> definisce il nome unico del filtro
• L'elemento <feGaussianBlur> definisce l'effetto sfocatura
• in="SourceGraphic" definisce l'effetto applicato all'intero elemento
• L'attributo stdDeviation definisce la quantità di sfocatura
• L'attributo filter dell'elemento <rect> collega l'elemento a "f1" filtro