W3docs
de
Anmelden

SVG-Schlagschatten

Erfahren Sie mehr über Schlagschatten, die Elemente <defs> und <filter>. Beispiele für <feOffset>, <feGaussianBlur> und <feColorMatrix> in SVG.

Ein Schlagschatten lässt eine SVG-Form so aussehen, als würde sie über der Seite schweben, indem eine verschwommene, verschobene Kopie der Form dahinter gezeichnet wird. In SVG erstellt man diesen Effekt aus niederstufigen Filter-Primitiven — kleinen Bausteinen wie Unschärfe und Versatz, die innerhalb eines <filter>-Elements miteinander verknüpft werden.

Wann SVG-Filter vs. CSS verwenden

Es gibt drei Möglichkeiten, einen Schatten hinzuzufügen, und sie sind nicht austauschbar:

  • box-shadow (CSS) — wirkt auf den rechteckigen Rahmen eines HTML/CSS-Elements. Er folgt nicht der Form von SVG-Pfaden, sodass ein Dreieck weiterhin einen rechteckigen Schatten erhält. Am besten geeignet für Boxen, Karten und Schaltflächen.
  • filter: drop-shadow() (CSS) — folgt der tatsächlich gezeichneten Form (einschließlich SVG-Pfade und transparente PNGs). Es ist die schnellste Möglichkeit, einem SVG aus einem Stylesheet einen Schlagschatten zu verleihen, und wird von allen gängigen Browsern unterstützt. Verwenden Sie es, wenn Sie nur einen Schatten benötigen und keine genaue Kontrolle brauchen.
  • SVG <filter> (dieses Kapitel) — die leistungsstärkste Option. Sie steuern jeden Schritt (Versatzabstand, Unschärferadius, Schattenfarbe, Mischmodus) und können mehrere Primitive kombinieren. Verwenden Sie es, wenn Sie einen farbigen Schatten, einen inneren Schatten oder einen Effekt jenseits einer einfachen Unschärfe benötigen.

Dieses Kapitel behandelt den SVG-<filter>-Ansatz. Für andere Filtereffekte siehe SVG-Unschärfeeffekte und die SVG-Filter-Einführung.

Beschreibung der SVG-Filter

Alle SVG-Filter werden innerhalb eines <defs>-Elements definiert. Das <defs>-Element ist eine Kurzform für definitions (Definitionen). Es enthält die Definition bestimmter Elemente wie Filter. Das <filter>-Element definiert einen SVG-Filter. Dieses Element hat ein id-Attribut (erforderlich), das den Filter identifiziert, auf den Sie dann von einer Form aus mit filter="url(#id)" verweisen.

Filter-Primitive und Eingaben

Jedes Primitiv liest ein Eingabebild und schreibt ein Ausgabebild. Zwei spezielle Eingaben sind eingebaut:

  • SourceGraphic — die ursprüngliche Form mit all ihren Farben.
  • SourceAlpha — dieselbe Form, aber nur mit ihrem Alpha-Kanal (Deckkraft), sodass sie als schwarze Silhouette erscheint. Dies ist der übliche Ausgangspunkt für einen Schatten, da ein Schatten eine dunkle Kopie der Form sein sollte, keine umgefärbte Kopie.

Sie verknüpfen Primitive mit zwei Attributen:

  • in — welches Bild dieses Primitiv liest (z. B. SourceAlpha oder ein result-Name eines früheren Primitivs).
  • result — ein Name, den Sie der Ausgabe dieses Primitivs geben, sodass ein späteres Primitiv es lesen kann.

Die in diesem Kapitel verwendeten Primitive:

  • <feOffset> — verschiebt ein Bild um dx (horizontal) und dy (vertikal). Dadurch wird der Schatten von der Form wegbewegt.
  • <feGaussianBlur> — verwischt ein Bild. Das Attribut stdDeviation legt den Unschärferadius fest: Größere Werte erzeugen einen weicheren, breiteren Schatten.
  • <feColorMatrix> — transformiert die RGBA-Werte jedes Pixels und ermöglicht so die Einfärbung eines Schattens in eine benutzerdefinierte Farbe.
  • <feBlend> / <feMerge> — kombinieren zwei Bilder. <feBlend> stapelt zwei Eingaben (in und in2) mit einem mode wie normal; <feMerge> schichtet beliebig viele Eingaben in Reihenfolge. Beide werden hier verwendet, um die ursprüngliche Grafik über dem fertigen Schatten zu zeichnen.

Um Schlagschatten zu erstellen, verwenden Sie das <feOffset>-Element. Sie nehmen eine Kopie der SVG-Grafik, verschieben sie in der XY-Ebene, weichen sie auf und zeichnen dann das Original darüber.

Beispiel für das SVG-Element <feOffset>:

<!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" width="150%" height="150%">
          <feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
          <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="purple" stroke-width="5" fill="pink" 
            filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Probier es selbst »

Im obigen Beispiel gibt das id-Attribut des <filter>-Elements einen eindeutigen Namen für den Filter an, und das filter-Attribut des <rect>-Elements verknüpft das Rechteck mit diesem Filter. <feOffset> kopiert SourceGraphic und verschiebt es 30 px nach rechts und 30 px nach unten (dx="30" dy="30"), wobei das Ergebnis als offOut gespeichert wird. <feBlend> zeichnet dann das ursprüngliche SourceGraphic über offOut, sodass die Form mit einer hartkantig versetzten Kopie dahinter sichtbar ist.

Beispiel für das SVG-Element <feGaussianBlur>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="200" height="200">
      <defs>
        <filter id="filter" x="0" y="0" width="250%" height="250%">
          <feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
      <rect width="150" height="150" stroke="coral" stroke-width="5" fill="pink" 
            filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Probier es selbst »

Hier wird die versetzte Kopie mit dem <feGaussianBlur>-Element verwischt. Das Attribut stdDeviation gibt den Grad der Unschärfe an — erhöhen Sie ihn für einen weicheren Schatten, verringern Sie ihn für einen schärferen. Da die Eingabe noch SourceGraphic ist, behält die verwischte Kopie die Farben der Form, was normalerweise nicht wie ein echter Schatten aussieht. Das nächste Beispiel behebt das.

Beispiel für einen schwarzen (Silhouetten-)Schatten mit SourceAlpha:

Um den Schatten als dunkle Silhouette statt als verwischten Klon der farbigen Form darzustellen, geben Sie <feOffset> die Eingabe SourceAlpha statt SourceGraphic. SourceAlpha enthält nur die Deckkraft, sodass die versetzte, verwischte Kopie vollständig schwarz erscheint — genau das, was ein Schatten sein sollte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="200" width="200">
      <defs>
        <filter id="filter" x="0" y="0" width="150%" height="150%">
          <feOffset result="offOut" in="SourceAlpha" dx="15" dy="15" />
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
      <rect width="120" height="120" stroke="purple" stroke-width="5" fill="pink" 
            filter="url(#filter)" /> 
       Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Probier es selbst »

Um den Schatten in einer benutzerdefinierten Farbe einzufärben, verwenden Sie das <feColorMatrix>-Element. Es multipliziert die Rot-, Grün-, Blau- und Alpha-Werte jedes Pixels mit den von Ihnen angegebenen Zahlen, sodass Sie die versetzte Kopie vor dem Verwischen abdunkeln oder umfärben können.

Beispiel für die Einfärbung des Schattens mit <feColorMatrix>:

In der folgenden Matrix werden die Rot-, Grün- und Blau-Kanäle jeweils auf 0.2 skaliert (die ersten drei Diagonalwerte), was die versetzte Kopie in Richtung einer gedämpften Farbe abdunkelt, während der Alpha-Kanal bei 1 bleibt (der vierte Diagonalwert), sodass der Schatten die Deckkraft der Form beibehält. Ändern Sie die drei 0.2-Werte, um den Schatten einzufärben — ein höherer Rotwert ergibt beispielsweise einen rötlichen Schatten.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="200" width="200">
      <defs>
        <filter id="filter" x="0" y="0" width="150%" height="150%">
          <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
          <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="9" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
      <rect width="150" height="150" stroke="purple" stroke-width="5" fill="lightblue" 
            filter="url(#filter)" /> 
       Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Probier es selbst »

Die <feDropShadow>-Kurzform

Das Verketten von <feOffset>, <feGaussianBlur> und <feBlend> ist für einen so häufigen Effekt aufwändig. Das <feDropShadow>-Primitiv bündelt alle drei in einem Element und wird von modernen Browsern unterstützt. Sie legen den Versatz mit dx / dy fest, die Weichheit mit stdDeviation und die Farbe mit flood-color (und optional flood-opacity).

Beispiel für das SVG-Element <feDropShadow>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="200" width="200">
      <defs>
        <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
          <feDropShadow dx="15" dy="15" stdDeviation="8" flood-color="purple" flood-opacity="0.5" />
        </filter>
      </defs>
      <rect width="120" height="120" stroke="purple" stroke-width="5" fill="pink" 
            filter="url(#shadow)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Dies erzeugt mit einer einzigen Zeile das gleiche Ergebnis wie die mehrstufigen Primitive-Beispiele oben.

Verwandte SVG-Kapitel

Übung

Übung
Welche SVG-Filtereingabe sollten Sie in 'feOffset' einspeisen, um einen schwarzen Silhouettenschatten statt einer umgefärbten Kopie der Form zu erzeugen?
Welche SVG-Filtereingabe sollten Sie in 'feOffset' einspeisen, um einen schwarzen Silhouettenschatten statt einer umgefärbten Kopie der Form zu erzeugen?
Was this page helpful?