Dégradés linéaires SVG

Recommandation de cours :

<defs> et <filter> <defs> Tous les filtres SVG sont dans<defs> dans l'élément.

L'élément est utilisé pour définir les filtres SVG. L'élément est une abréviation de (definitions), qui contient des définitions d'éléments spéciaux (comme les filtres).L'élément est utilisé pour définir les filtres SVG. <filter>

L'élément SVG <feOffset> a un attribut id obligatoire, utilisé pour identifier le filtre. Ensuite, le graphique pointe vers le filtre à utiliser.

Exemple 1

<feOffset> L'élément est utilisé pour créer des effets d'ombre. L'idée est : d'abord obtenir un graphique SVG (image ou élément), puis le déplacer légèrement sur le plan xy.

Dans le premier exemple, un rectangle a été décalé (en utilisant <feOffset>image originale en haut de l <feBlend>）：

Voici le code 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>

Essayez-le vous-même

Explication du code :

  • L'attribut id de l'élément <filter> définit le nom unique du filtre
  • <rect> L'attribut filter de l'élément relie cet élément au filtre "f1"

Exemple 2

Maintenant, vous pouvez flouter l'image avec un décalage (en utilisant <feGaussianBlur>）：

Voici le code 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>

Essayez-le vous-même

Explication du code :

  • L'attribut stdDeviation de l'élément <feGaussianBlur> définit la quantité de flou

Exemple 3

Maintenant, mettez l'ombre en noir :

Voici le code 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>

Essayez-le vous-même

Explication du code :

  • L'attribut in de l'élément <feOffset> est modifié en "SourceAlpha", ce qui utilise le canal Alpha au lieu de l'ensemble des pixels RGBA pour le flou

Exemple 4

Maintenant, traitez l'ombre comme une couleur :

Voici le code 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>

Essayez-le vous-même

Explication du code :

  • <feColorMatrix> Le filtre est utilisé pour convertir les couleurs de l'image décalée pour les rapprocher du noir. Les trois valeurs '0.2' de la matrice sont multipliées par les canaux rouge, vert et bleu. La réduction de leurs valeurs rend les couleurs plus proches du noir (le noir étant 0)