SVG-Weichzeichnereffekte

Beschreibung von SVG-Filtern

Alle SVG-Filter werden innerhalb eines <defs>-Elements definiert. Das <defs>-Element ist eine Abkürzung für „Definitions“ (Definitionen). Es enthält die Definition spezifischer Elemente wie Filter.

Das <filter>-Element definiert einen SVG-Filter. Dieses Element verfügt über ein erforderliches id-Attribut, das den Filter identifiziert. Das <filter>-Element wird nicht direkt gerendert. Seine einzige Verwendung besteht darin, über das filter-Attribut in SVG und die url()-Funktion in CSS referenziert zu werden.

Jedes <filter>-Element enthält verschiedene Filterelemente als Kindelemente. Solche Filterprimitiven führen eine wesentliche grafische Operation auf einem oder mehreren Eingabewerten aus und geben nur ein Ergebnis aus. Neben der Verwendung des Ergebnisses anderer Primitiven als Eingabe kann ein Filterprimitiv auch andere Eingaben wie SourceGraphic und SourceAlpha akzeptieren.

Alle Filterelemente enthalten das Präfix „fe“, das für „filter effect“ (Filtereffekt) steht.

Derzeit gibt es 17 Filterprimitiven, die in der SVG-Filter-Spezifikation definiert sind.

In unserem Beispiel verwenden wir das <feGaussianBlur>-Element, um einen Weichzeichnereffekt zu erstellen.

Beispiel zum Erstellen eines Weichzeichnereffekts:

Beispiel zum Erstellen eines Weichzeichnereffekts

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Code-Erklärung:

Das id-Attribut des <filter>-Elements gibt einen eindeutigen Namen für den Filter an.
Der Weichzeichnereffekt wird mit dem <feGaussianBlur>-Element festgelegt.
Der Teil in="SourceGraphic" gibt an, dass der Effekt für das gesamte Element erstellt wird.
Das Attribut stdDeviation gibt die Stärke der Weichzeichnung an.
Das filter-Attribut des <rect>-Elements verknüpft das Element mit dem Filter „filter“.

Practice

Welche Funktionen haben die Attribute stdDeviation und in im SVG-Filter 'feGaussianBlur'?

Das Attribut stdDeviation definiert die Standardabweichung für den Weichzeichnungsvorgang.Das Attribut in definiert die Eingabe für den Filter.Das Attribut stdDeviation wird verwendet, um den Radius des Filters anzugeben.Das Attribut in weist dem Filter die Farbe zu.Die Attribute stdDeviation und in haben keine spezifische Funktion im SVG-Filter 'feGaussianBlur'.

SVG-Weichzeichnereffekte ​

Beschreibung von SVG-Filtern ​

Beispiel zum Erstellen eines Weichzeichnereffekts: ​

Practice ​

SVG-Weichzeichnereffekte

Beschreibung von SVG-Filtern

Beispiel zum Erstellen eines Weichzeichnereffekts:

Practice