Gradiente lineare SVG

<defs> e <filter>

definiti nei <defs> Tutti i filtri SVG sono definiti nei<defs> definiti nell'elemento

L'elemento viene utilizzato per definire i filtri SVG. L'elemento è l'abbreviazione di definizione (definitions), che contiene definizioni di elementi speciali (ad esempio, filtri).L'elemento viene utilizzato per definire i filtri SVG. <filter>

L'elemento <feOffset> ha un attributo id obbligatorio, utilizzato per identificare il filtro. Poi il grafico si riferisce al filtro da utilizzare.

Esempio 1

<feOffset> L'elemento viene utilizzato per creare un'ombreggiatura. La logica è: prima ottenere un'immagine SVG (immagine o elemento), poi muoverla leggermente nel piano xy.

Nel primo esempio, è stato offsettato un rettangolo (usando <feOffset>），poi aggiungere l'immagine originale in cima all'immagine offsetta (usando <feBlend>）：

Questo è il codice SVG:

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

Prova personalmente

Spiegazione del codice:

• L'attributo id dell'elemento <filter> definisce il nome unico del filtro
• <rect> L'attributo filter dell'elemento collega l'elemento al filtro "f1"

Esempio 2

Ora, è possibile sfocare l'immagine con un offset (usando <feGaussianBlur>）：

Questo è il codice SVG:

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

Prova personalmente

Spiegazione del codice:

• L'attributo stdDeviation dell'elemento <feGaussianBlur> definisce la quantità di sfocatura

Esempio 3

Ora, impostiamo l'ombreggiatura in nero:

Questo è il codice SVG:

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

Prova personalmente

Spiegazione del codice:

• <feOffset> L'attributo in dell'elemento viene modificato in "SourceAlpha", che utilizza il canale Alpha invece di tutto il pixel RGBA per il sfocatura

Esempio 4

Ora, trattiamo l'ombreggiatura con un colore:

Questo è il codice SVG:

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

Prova personalmente

Spiegazione del codice:

• <feColorMatrix> Il filtro viene utilizzato per trasformare i colori dell'immagine spostata in tonalità più vicine al nero. I tre valori '0.2' della matrice vengono moltiplicati per i canali rosso, verde e blu. La riduzione dei loro valori rende i colori più vicini al nero (nero è 0)