SVG Unschärfeeffekt

Der Unschärfeeffekt in SVG kann durch das<feGaussianBlur>Element erreicht werden, das den Gaußschen Weichzeichnungsalgorithmus verwendet, um das Bild zu verwischen.

Mit Unschärfeeffekten können verschiedene visuelle Effekte wie weiche Schatten, Schärfentiefe, unscharfe Hintergründe und mehr erzeugt werden.

<feGaussianBlur>Element:

<feGaussianBlur>Das Element wird verwendet, um einen Gaußschen Weichzeichner auf ein Bild anzuwenden. Es hat zwei Hauptparameter:

  • stdDeviation: Gibt die Standardabweichung des Gaußschen Weichzeichners an. Je größer die Standardabweichung, desto stärker die Unschärfe. Eine oder zwei Zahlen können verwendet werden, um die Standardabweichung in horizontaler bzw. vertikaler Richtung anzugeben. Wenn nur eine Zahl angegeben wird, sind die horizontalen und vertikalen Standardabweichungen gleich.

  • in: Gibt das Eingabebild an, normalerweiseSourceGraphic, was das Zielelement selbst darstellt, auf das der Filtereffekt angewendet wird.

Der folgende Code definiert einen Weichzeichnerfilter und wendet ihn dann auf ein rot gefülltes Rechteck an, wodurch das Rechteck unscharf erscheint. stdDeviation="5" bedeutet, dass die Standardabweichung sowohl in horizontaler als auch in vertikaler Richtung 5 beträgt, d. h., die Unschärfe beträgt 5 Pixel.

Beispiel

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Weichzeichnerfilter definieren -->
  <filter id="blur_filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
 
  <!-- Das Rechteck, auf das der Weichzeichnerfilter angewendet wird -->
  <rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blur_filter)" />
</svg>

Beispiel 1

Das <feGaussianBlur>-Element wird verwendet, um Unschärfeeffekte zu erzeugen:

fegaussianblur

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Code-Erklärung:

  • Das id-Attribut des <filter>-Elements definiert einen eindeutigen Namen für den Filter.
  • Das <feGaussianBlur>-Element definiert den Unschärfeeffekt.
  • Der Teil in="SourceGraphic" definiert, dass der Effekt aus dem gesamten Bild erzeugt wird.
  • Das stdDeviation-Attribut gibt das Ausmaß der Unschärfe an.
  • Das filter-Attribut des <rect>-Elements wird verwendet, um das Element mit dem Filter "f1" zu verknüpfen.

Hinweise

  • Sie können den Unschärfeeffekt auf jedes SVG-Grafikelement anwenden, einschließlich Rechtecken, Kreisen, Pfaden und mehr.

  • Die Parameter des UnschärfeeffektsstdDeviationkönnen nach Bedarf angepasst werden, um einen geeigneten Unschärfegrad zu erreichen.

  • Unschärfeeffekte können mit anderen Filtereffekten kombiniert werden, wie Schatten, Mischmodi und so weiter.

Durch die Verwendung der<feGaussianBlur>Element können Sie Unschärfeeffekte zu SVG-Grafikelementen hinzufügen, wodurch sie ein weiches, verschwommenes Aussehen erhalten und so verschiedene visuelle Effekte erzielt werden.

Andere Erweiterungen