Ein Blick auf SVG-Lichtquellfilter

Der folgende Beitrag wurde von Joni Trythall verfasst. Joni hat kürzlich einen Pocket Guide to Writing SVG fertiggestellt. Ich beschäftige mich schon seit einiger Zeit mit SVG, arbeite damit, lerne darüber, schreibe darüber... aber es gibt so viel zu wissen. Es ist wirklich ein ganz eigenes Universum des Webs. Also habe ich Joni kontaktiert, um zu sehen, ob sie etwas für CSS-Tricks über SVG schreiben möchte, und sie hat zugestimmt! Hier ist Joni über Beleuchtung in SVG, etwas, von dem ich weiß, dass ich vor dem Lesen dieses Artikels nichts darüber wusste.

SVG verfügt über eine eigene Reihe von Filtereffekten, die es dem Autor beim Schreiben von SVG ermöglichen, mehrere dieser Effekte zu kombinieren und den Filter auf die Grafik anzuwenden.

Einige der fantastischeren Funktionen von SVG-Filtern drehen sich um die Lichtquelle. Sie können einen Beleuchtungseffekt auf SVG anwenden und dann dessen Details über einen von drei Filtereffekten steuern: fePointLight, feDistantLight und feSpotLight.

Diese Lichtquellfilter ermöglichen einige besonders interessante Fähigkeiten. Sehen Sie sich diesen glänzenden, beleuchteten Apfel an (im Vergleich zu einem nicht beleuchteten)

Siehe den Stift 7d39edca68f2d2b2dfe0e7f3728a276a von Joni Trythall (@jonitrythall) auf CodePen.

In diesem Beitrag werden wir die grundlegende Syntax für SVG-Filter überprüfen, uns mit einigen der gängigsten Attribute befassen, die Optionen für Lichtquellen-Effekte untersuchen und dann alles mit einem SMIL-Animations-Experiment zusammenführen.

Filter-Element

SVG-Filterdetails befinden sich innerhalb eines <filter>-Elements. Ein <filter> besteht aus mehreren verschiedenen Effekten, und diese Effekte werden dann alle auf ein grafisches Element (wie ein Rechteck, <rect>) oder ein Container-Element (wie eine Gruppe, <g>) angewendet.

<svg>
  <defs>
    <filter id="apples">
      < (filter effect) />
      < (filter effect) />
    </filter>
  </defs>
  <rect filter="url(#apples)" />
</svg>

Ausgewählte Attribute

Obwohl es eine *große* Anzahl von Filter-bezogenen Attributen gibt, werden wir uns speziell auf die konzentrieren, die hier in den Apfel-Demos verwendet werden.

Die folgenden Attribute, mit Ausnahme von in, können innerhalb jedes SVG-Filtereffekts verwendet werden.

x, y

Die Attribute x und y innerhalb von Filtern legen die Mindestkoordinaten auf der entsprechenden Achse für den Bereich fest, in dem der Filter stattfinden wird.

result

Das Attribut result weist einem bestimmten Filtereffekt einen Namen zu. Dieser Effekt kann dann von einem anderen Effekt referenziert werden, um über das Attribut in fortzufahren. Beide Effekte müssen sich innerhalb desselben <filter> befinden und ermöglichen es uns, mehrere Filtereffekte zu einem zu kombinieren, der auf eine Grafik angewendet wird.

Ein result-Wert ist nicht erforderlich, aber nützlich, wenn bestimmte Effekte wiederverwendet werden sollen. Während sein Zweck dem eines id sehr ähnelt, sind result-Werte nur innerhalb desselben <filter>-Elements nützlich und daher nirgendwo sonst im Dokument zugänglich.

in

Das Attribut in gibt die Eingabe für einen bestimmten Filtereffekt an. Es gibt sieben Wertoptionen, darunter den Namen des result, den wir gerade im vorherigen Abschnitt besprochen haben, aber vielleicht die am häufigsten referenzierten sind SourceGraphic und SourceAlpha.

Wenn das Attribut in nicht spezifiziert ist und der Filtereffekt der erste in <filter> aufgelistete ist, wird standardmäßig SourceGraphic verwendet. Wenn dieses Attribut alternativ nicht spezifiziert ist und nicht der erste aufgelistete Effekt ist, erbt der Standardwert den Wert des vorherigen Effekts.

• Ein SourceGraphic-Wert in in setzt die Eingabe für den Filter auf die RGB-Farben des grafischen Elements, auf das er angewendet wird.
• SourceAlpha hat die gleiche Auswirkung wie SourceGraphic, außer dass für die RGB-Kanal-Eingabe Schwarzwerte verwendet werden.

Hier ist ein Blick auf die Auswirkungen, die diese beiden Werte haben, wenn ein Weichzeichner auf zwei identische Kreise angewendet wird, die beide einen fill-Wert von #ED6E46 haben.

Lichtquellfilter

Nachdem wir nun mit einigen der gängigsten Attribute für SVG-Filter vertraut sind, konzentrieren wir uns auf die Lichtquellen-Effekte.

SVG-Beleuchtung wird durch die Verwendung von feDiffuseLighting oder feSpecularLighting-Filtern aufgerufen, die ihre Berechnungen auf der Grundlage der entsprechenden Komponente des Phong-Beleuchtungsmodells (PDF) aufbauen.

Während diffuses Licht Licht ist, das eine Oberfläche trifft und gleichmäßig in alle Richtungen gestreut wird, bezieht sich spekulares Licht auf einen hellen Lichtpunkt, der in eine bestimmte Richtung reflektiert wird. Die Demos in diesem Beitrag konzentrieren sich nur auf Beleuchtungseffekte, die über spiegelndes Licht oder feSpecularLighting angesprochen werden, oder „Licht, das den Dingen Glanz verleiht!“.

Attribute, die innerhalb dieses Filtereffekts verwendet werden, wie specularConstant und specularExponent, legen die Details des Lichts basierend auf den Berechnungen des Phong-Beleuchtungsmodells fest.

Die grundlegende Syntax für Lichtfilter sieht zukünftig so aus

<filter>
  <feSpecularLighting>
    < (light source effect) />
    < (light source effect) />
  </feSpecularLighting>
</filter>

Werfen wir einen Blick auf die Effekte fePointLight, feDistantLight und feSpotLight, die in dieser angegebenen Berechnung enthalten sein werden.

fePointLight

fePointLight legt einen bestimmten Punkt als Hauptlichtquelle fest, wenn der Filter feSpecularLighting angewendet wird, und ist die Methode, mit der der glänzende Apfel im allerersten Demo erzielt wurde.

Das Erscheinungsbild des Lichts, das nicht ganz den Rand des Apfels erreicht, wird durch den Wert des feGaussianBlur-Effekts erzeugt, und ein höherer Wert hier würde eine stärkere Überblendung erzeugen.

x, y, z

Die Attribute x, y und z bestimmen hier die Position der Lichtquelle im Koordinatensystem auf der entsprechenden Achse. z passt die wahrgenommene Größe des Lichtpunkts an, indem es dessen Position vom Punkt zum Betrachter bestimmt; ein höherer Wert hier führt zu einem größeren Lichtpunkt, der dem Betrachter „näher“ ist.

feDistantLight

feDistantLight definiert eine entfernte Lichtquelle.

• Das Attribut azimuth innerhalb von feDistantLight definiert den Uhrzeigersinn-Winkel in Grad für die Lichtquelle in der XY-Ebene.
• Der Wert innerhalb von `elevation` definiert den Winkel in Grad, in dem die Lichtquelle von der XY-Ebene zur Z-Achse zeigt.

Der Filter auf dem Apfel unten hat einen azimuth-Wert von 25px und einen elevation-Wert von 40px

Siehe den Stift 9be1624ee991e2978a922ac39b8bb029 von Joni Trythall (@jonitrythall) auf CodePen.

feSpotLight

feSpotLight definiert einen Scheinwerfer als Lichtquelle.

• Die Werte x, y und z legen die Position der Lichtquelle entlang der entsprechenden Achse im Koordinatensystem fest.
• limitingConeAngle beschränkt den Bereich, auf den Licht projiziert wird, indem es verhindert, dass Licht außerhalb davon gerendert wird. Dieser Wert legt den Winkel in Grad zwischen der Achse des Scheinwerfers und dem Kegel fest. Ein höherer Wert hier führt zu einem weniger eingeschränkten Bereich.

Der feSpotLight-Filter unten enthält die folgenden Spezifikationen: x="400" y="400" z="900" limitingConeAngle="9"

Siehe den Stift 195ed2b4fa8f17b0f8145b9384116a44 von Joni Trythall (@jonitrythall) auf CodePen.

Animierte Lichtquellen

Lichtquellen können auch animiert werden. Der Code für diese Grafik ist inline recht komplex und lang, aber der Wissenschaft zuliebe werden wir die Sonne von einer Seite des Apfelbaums zur anderen bewegen lassen, als „Lichtquelle“.

Siehe den Stift Apple Tree Lighting Animation von Joni Trythall (@jonitrythall) auf CodePen.

Die Sonne, alias unsere vorgetäuschte Lichtquelle, bewegt sich über den Bildschirm durch SMIL-Animationen. Im Gegenzug wird der Lichtquellenfilter auf dem Baum als Reaktion auf die Positionierung der Sonne ebenfalls animiert.

Ein <animate>-Element muss innerhalb jedes zu animierenden Elements platziert werden, beides ist im HTML vermerkt.

Fazit

SVG-Lichtquellfilter können einer Grafik auf dem Bildschirm wirklich Leben einhauchen und die Grenzen der zweidimensionalen Einschränkungen der Sprache testen. Diese erweiterten Funktionen ermöglichen es uns, komplexere und detailliertere Bilder zu erstellen, die im DOM leben und leicht interaktiv oder skriptfähig gemacht werden können.

Die hier behandelten Beleuchtungsdetails kratzen nur an der Oberfläche dessen, was SVG-Filter leisten können, aber hoffentlich inspiriert Sie das Gelesene, damit zu experimentieren und sein volles Potenzial zu erkunden.

In diesem Beitrag haben wir grundlegende <filter>-Syntax behandelt, uns einige Attribute angesehen, uns auf einige interessante Lichtquellen-Effekte konzentriert und diese Effekte im Namen der Wissenschaft animiert.

---

Hinweis des Herausgebers: Schauen Sie sich unbedingt Joni's Pocket Guide to Writing SVG an.