SVG-Linienverlauf

Kursempfehlung:

<defs> und <filter> <defs> Alle SVG-Filter sind in<defs> in dem Element definiert.

Das Element wird verwendet, um SVG-Filter zu definieren. Das Element ist eine Abkürzung für (definitions), das Definitionen (z.B. Filter) enthält.Das Element wird verwendet, um SVG-Filter zu definieren. <filter>

Das <feOffset>-Element hat eine notwendige id-Eigenschaft, um den Filter zu identifizieren. Dann verweist das Grafik auf den zu verwendenden Filter.

Beispiel 1

Das Element wird verwendet, um Schattenwirkungen zu erzeugen. Der Ansatz ist: Zuerst wird ein SVG-Grafik (Bild oder Element) erhalten, dann wird es leicht auf der xy-Ebene verschoben.

Der erste Beispiel hat einen Rechteck verschoben (verwenden , <feBlend>,

Dies ist der SVG-Code:

<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="grün" stroke-width="3"
  fill="gelb" filter="url(#f1)" />
</svg>

Versuchen Sie es selbst

Code-Explainierung:

  • Die id-Eigenschaft des <filter>-Elements definiert den eindeutigen Namen des Filters
  • <rect>-Elementeigenschaft filter verknüpft das Element mit dem Filter "f1"

Beispiel 2

Jetzt kann das Bild verschwommen werden (verwenden ,

Dies ist der SVG-Code:

<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="grün" stroke-width="3"
  fill="gelb" filter="url(#f2)" />
</svg>

Versuchen Sie es selbst

Code-Explainierung:

  • <feGaussianBlur>-Elementeigenschaft stdDeviation definiert den Betrag der Verzerrung

Beispiel 3

Nun, stellen Sie den Schatten in Schwarz ein:

Dies ist der SVG-Code:

<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="grün" stroke-width="3"
  fill="gelb" filter="url(#f3)" />
</svg>

Versuchen Sie es selbst

Code-Explainierung:

  • Das Attribut 'in' des Elements <feOffset> wird auf 'SourceAlpha' geändert, es verwendet den Alpha-Kanal anstatt des gesamten RGBA-Pixels für dasBlur

Beispiel 4

Nun, behandeln Sie den Schatten als eine Farbe:

Dies ist der SVG-Code:

<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="grün" stroke-width="3"
  fill="gelb" filter="url(#f4)" />
</svg>

Versuchen Sie es selbst

Code-Explainierung:

  • <feColorMatrix> Der Filter wird verwendet, um die Farben eines verschobenen Bildes in etwas Näheres an Schwarz zu konvertieren. Die drei Werte '0.2' im Matrix werden mit den Rot-, Grün- und Blau-Kanälen multipliziert. Eine Verringerung ihrer Werte bringt die Farben näher an Schwarz (Schwarz ist 0).