SVG lineær gradation

Kursusanbefaling:

<defs> og <filter> <defs> alle SVG-filtre findes i<defs> defineret i elementet.

Element bruges til at definere SVG-filtre. Element er en forkortelse for (definitions) og indeholder definitioner af specielle elementer (f.eks. filtre).Element bruges til at definere SVG-filtre. <filter>

SVG <feOffset>-elementet har et obligatorisk id-attribut, der bruges til at identificere filtre. Derefter henviser grafikken til det filtre, der skal bruges.

Eksempel 1

Element bruges til at skabe skyggeeffekter. Tanken er: Først fås en SVG-grafik (billede eller element), og derefter flyttes det lidt på xy-planet.

Den første eksempel flyttede en rektangel (brug , <feBlend>）：

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

  • <filter>-elementets id-attribut definerer filtrets unikke navn
  • <rect>-elementets filter-attribut forbinder elementet til "f1"-filtret

Eksempel 2

Nu kan du blødgøre afbildningen (brug <feGaussianBlur>）：

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

  • StdDeviation-attributet på <feGaussianBlur>-elementet definerer mængden af blødgøring

Eksempel 3

Nu, sæt skyggen til sort:

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

  • <feOffset> elementets in-attribut ændres til "SourceAlpha", hvilket bruger Alpha-kanalen i stedet for hele RGBA-pixel

Eksempel 4

Nu, behandl skyggen med en farve:

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

  • <feColorMatrix> Filtrer bruges til at konvertere farver i det flyttede billede til noget, der er tættere på sort. De tre '0.2'-værdier i matricen multipliceres med røde, grønne og blå kanaler. At reducere deres værdier gør farverne tættere på sort (sort er 0)