HTML5 SVG 2d Einführung 10 - Definition und Verwendung von Filtern

Autor：Eve Cole Aktualisierungszeit：2025-04-04 01:00:03

Filter können als das leistungsstärkste Merkmal von SVG angesehen werden. Sie ermöglichen es Ihnen, Grafiken (Grafikelemente und Containerelemente) nur in professioneller Software zu filtern, die nur in professioneller Software verfügbar sind. Dies erleichtert es Ihnen, Bilder auf der Client -Seite zu generieren und zu ändern. Darüber hinaus zerstört der Filter die Struktur des Originaldokuments nicht und ist daher auch sehr aufrechterhalten.

Filter werden durch Filterelemente definiert : Fügen Sie bei Bedarf Filterattribute zu den Grafiken oder Containern hinzu, für die Filtereffekte erforderlich sind, und beziehen Sie sich auf die relevanten Filter.

Filterelemente enthalten viele Filteratomoperationen; Jeder Atombetrieb führt einen grundlegenden grafischen Betrieb am eingehenden Objekt aus und erzeugt eine grafische Ausgabe. Die meisten Atomoperationen erzielen im Grunde genommen ein RGBA -Bild. Die Eingabe für jeden Atombetrieb kann entweder das Quelldiagramm oder das Ergebnis anderer Atomoperationen sein. Daher ist der Prozess des Zitierens des Filtereffekts die Anwendung der entsprechenden Filteratomoperationen auf die Quellgrafik und schließlich eine neue Grafik zu generieren und sie zu rendern.

Bei Verwendung des Filterattributs in einem Container (z. B. ein G -Element) wird der Filtereffekt auf alle Elemente im Container angewendet. Die Elemente im Container werden jedoch nicht direkt auf den Bildschirm gerendert, sondern vorübergehend gespeichert. Die Grafikbefehle werden dann als Teil des Verarbeitungsprozesses der referenzierten Filterelemente und dann als Rendering ausgeführt. Dies wird durch die Verwendung von SourceGraphic und Sourcealpha angegeben. Dieser Effekt wird im dritten Fall im zweiten Beispiel unten gezeigt.

Einige Filtereffekte erzeugen undefinierte Pixelpunkte, die zu transparenten Effekten verarbeitet werden.

Schauen wir uns ein Beispiel an:

<SVG ViewBox = "0 0 200 120"

xmlns = "http://www.w3.org/2000/svg" Version = "1.1">

<title> SVG -Filter -Effekt -Beispiel </title>

<desc> Verwenden Sie verschiedene Filtereffekte, um 3D -Beleuchtungseffekte eines Paares von Grafiken zu erzielen. </desc>

<defs>

<fespecularLighting in = "Blur" Surfacescale = "5" SpecularConstant = ". 75"

specularexponent = "20" lighting-color = "#BBBBBBBBB"

result = "specout">

</fespkularLighting>

<fecomposite in = "SourceGraphic" in2 = "specout" operator = "arithmetic"

K1 = "0" K2 = "1" K3 = "1" K4 = "0" result = "litpaint"/>

</femerge>

</filter>

</defs>

<g>

<Pfad fill = "Keine" Stroke = "#D90000" STRECE-WIDHTH = "10"

D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />

<Pfad fill = "#D90000"

D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />

</g>

</svg>

Der Effekt dieses Beispiels auf Firefox ist das Ergebnis des letzten Bildes:

Hinweis: Möglicherweise gibt es einige Unterschiede in anderen Browsern.

Dieser Filter verwendet 6 Effekte wiederum (einstufiges Rendering wird im obigen Bild angezeigt :):

Fegaussianblur: Dieser Schritt besteht darin, die Verarbeitung von Gaußschen Unschärfe durchzuführen. Die Eingabe dieses Spezialeffekts ist der Transparenzwert des Quellbildes, und der Ausgang wird in der temporären gepufferten Unschärfe gespeichert. Der Unschärfewert wird als Eingabe von Feoffset und Fespkularlicht unten verwendet.

Feoffset: Dieser Schritt soll das Bild in einige Positionen übersetzen. Die Eingabe dieses Effekts ist die Unschärfe, die im vorherigen Schritt erzeugt wird, wodurch ein neuer Cache -Offsetblur generiert wird.

FespkularLighting: Dieser Schritt besteht darin, die Oberfläche des Bildes mit Licht zu verarbeiten. Der Eingang ist die im erste Schritt erzeugte Unschärfe, und der Ausgang wird im neuen Cache -Specout gespeichert.

Zweimal Fecomposite: Diese beiden Schritte kombinieren verschiedene Cache -Schichten.

Femerge: Dieser Schritt soll verschiedene Schichten zusammenführen. Dieser Schritt ist normalerweise der letzte Schritt, der die Schichten jedes Cache verschmilzt, das endgültige Bild erzeugt und es rendert. Obwohl dieser Schritt mehrmals mit Fecomposite -Spezialeffekten durchgeführt werden kann, ist er doch nicht sehr bequem.

Filterelement und Filtereffektbereich

Der Filtereffektbereich bezieht sich auf den Bereich, in dem der Filtereffekt funktioniert. Die Größe dieses Bereichs wird durch die folgenden Eigenschaften des Filterelements definiert:

filterunits = userSpaceonuse | ObjectBoundingbox

Diese Eigenschaft definiert den Koordinatenraum, der von X, Y, Breite und Höhe verwendet wird. Wie bei anderen Eigenschaften im Zusammenhang mit Einheiten enthält diese Eigenschaft zwei Werte: UserSpaceonuse und ObjectBoundingBox (Standard).

UserSpaceonuse repräsentiert das Benutzerkoordinatensystem, das das Element verwendet, das auf das Filterelement verweist.

Die ObjectBoundingBox bedeutet den Prozentsatz des Begrenzungsfelds, das das Filterelement als Wertebereich verweist.

X, Y, Breite, Höhe

Diese Eigenschaften definieren den rechteckigen Bereich, in dem der Filter arbeitet. Der Filtereffekt wird nicht auf Punkte über diesen Bereich hinaus angewendet. Der Standardwert von x, y beträgt -10%und der Standardwert von Breite und Höhe 120%.

Filterres

Diese Eigenschaft definiert die Größe des Zwischen -Cache -Bereichs und definiert auch die Qualität des zwischengespeicherten Bildes. Normalerweise ist dieser Wert nicht erforderlich, und der Browser wählt den entsprechenden Wert selbst aus. Im Allgemeinen sollte der Filtereffektbereich definiert werden, um genau dem Hintergrundpunkt und Punkt nacheinander zu entsprechen, was bestimmte Effizienzvorteile erzielt.

Zusätzlich zu diesen Eigenschaften sind auch die folgenden Eigenschaften des Filterelements wichtig:

primitiveUnits = userSpaceonuse | ObjectBoundingbox

Diese Eigenschaft definiert den Koordinatenraum, der durch Koordinaten und Längen in jeder Atomoperation verwendet wird. Der Wert dieser Eigenschaft ist UserSpaceonuse und ObjectBoundingBox. Der Standardwert ist jedoch UserSpaceonuse.

XLink: href = <IRI>

Diese Eigenschaft wird verwendet, um sich auf andere Filterelemente im aktuellen Filterelement zu beziehen.

Es ist erwähnenswert, dass das Filterelement nur die Attribute seines übergeordneten Knotens erben und die Attribute des Elements, das das Filterelement verweist, nicht erben.

Filterübersicht

Die verschiedenen Filteratomoperationen werden nicht ausführlich beschrieben. Sie können die offiziellen Dokumente bei Bedarf einfach überprüfen. Schauen wir uns die Gemeinsamkeiten dieser Operationen an. Mit Ausnahme des Attributs sind die anderen folgenden Attribute für alle Atomoperationen verfügbar.

X, Y, Breite, Höhe

Ich werde nicht viel über diese Eigenschaften sagen. Sie definieren den Bereich, in dem die Filteratome funktionieren, so dass es genauso gut zum Filterbereich werden kann. Diese Attribute sind durch den Aktionsbereich des Filterelements begrenzt. Standardmäßig betragen die Werte 0, 0, 100% bzw. 100%. Die Wirkungsregion dieser Atome übersteigt die des Filterelements nicht.

Ergebnis

Speichern Sie die Ergebnisse dieses Schritts. Nach Angabe von Ergebnis können andere nachfolgende Operationen desselben Filterelements als Eingabe verwendet werden. Sie werden dies wissen, indem Sie sich auf das obige Beispiel beziehen. Wenn dieser Wert weggelassen wird, kann er nur als implizite Eingabe für den nächsten nächsten Schritt verwendet werden. Beachten Sie, dass der im nächste Schritt angegebene im nächsten Schritt bereits die Eingabe mit IN angegeben hat.

Zeigt die Eingabe für diesen Schritt an. Wenn das In -Attribut weggelassen wird, wird das Ergebnis des vorherigen Schritts standardmäßig als Eingabe dieses Schritts verwendet. Wenn der in Schritt weggelassen wird, wird SourceGraphic als Wert verwendet (siehe Beschreibung unten). Das In -Attribut kann sich auf den im vorherigen Ergebnis gespeicherten Wert beziehen oder die folgenden 6 speziellen Werte angeben :

SourceGraphic: Dieser Wert repräsentiert die Eingabe, um das aktuelle Diagrammelement als Operation zu verwenden.

Sourcealpha: Dieser Wert repräsentiert die Eingabe, um den Alpha -Wert des aktuellen Diagrammelements als Operation zu verwenden.

Hintergrund: Dieser Wert repräsentiert die Verwendung des aktuellen Hintergrund -Screenshot als Eingabe für den Vorgang.

Hintergrundalpha: Dieser Wert repräsentiert die Eingabe des Vorgangs anhand des Alpha -Wertes des aktuellen Hintergrunds.

FILLPAINT: Dieser Wert verwendet den Wert des Füllattributs des aktuellen Diagrammelements als Eingabe in den Vorgang.

Strokepaint: Dieser Wert verwendet den Wert des Strichattributs des aktuellen Grafikelements als Eingabe für den Vorgang.

Unter diesen Werten können Hintergrund und Hintergrund schwer zu verstehen sein. Schauen wir uns diese beiden Werte unten an.

Zugriff auf Hintergrund -Screenshot

Normalerweise können wir den Hintergrund -Screenshot des Elements, das das Filterelement als Quellbild des Filtereffekts bezieht, direkt verwenden. Die Werte, die diese Eingabe darstellen, sind Hintergrund- und Hintergrundalpha, die vorherige enthält die Farbe und die Alpha -Werte, und letztere enthält nur die Alpha -Werte. Um diese Verwendung zu unterstützen, muss auch diese Funktion auf dem Element, das auf das Filterelement verweist, explizit aktiviert werden, für das die Einstellung der Aktivität des Elements aktiviert werden muss.

Background aktivieren = akkumulieren | new [<x> <y> <width> <höhe>] | erben

Diese Eigenschaft kann nur für Containerelemente verwendet werden und definiert, wie Sie Hintergrund -Screenshots machen.

Der neue Wert darstellt: Ermöglicht die untergeordneten Elemente des Containers auf den Hintergrund -Screenshot des Containers, und die untergeordneten Elemente des Containers werden auf den Hintergrund und auf dem Gerät gerendert.

Ansammlung ist der Standardwert, und sein Effekt hängt vom Kontext ab: Wenn das übergeordnete Containerelement Enable-Background verwendet: NEU, beteiligt sich alle grafischen Elemente des Containers am Rendern des Hintergrunds. Andernfalls bedeutet dies, dass der übergeordnete Container nicht bereit ist, einen Hintergrund -Screenshot zu machen, und die Anzeige des grafischen Elements dieses Elements wird nur auf dem Gerät angezeigt.

Das folgende Beispiel zeigt den Effekt dieser Werte:

<SVG ViewBox = "0 0 1350 270"

xmlns = "http://www.w3.org/2000/svg" Version = "1.1">

<title> Beispiel für die Verwendung von Hintergrund -Screenshots </title>

<desc> Die folgenden Beispiele erklären die Verwendung von Hintergrund -Screenshots in verschiedenen Situationen </desc>

<defs>

<filter id = "ShiftBgandblur"

filterunits = "userSpaceonuse" x = "0" y = "0">

<Desc> Dieser Filter verwendet das Quellbild, verwendet jedoch Hintergrund -Screenshots </desc>

</filter>

<filter id = "ShiftBgandBlur_WithSourcegraphic"

filterunits = "userSpaceonuse" x = "0" y = "0">

<desc> Dieser Filter Special Effect kombiniert Hintergrund -Screenshots und Bilder des aktuellen Elements </desc>

</femerge>

</filter>

</defs>

<desc> Das erste Bild ist der Effekt, dass kein Filter addiert </Desc>

</g>

</g>

<desc> Das zweite Bild besteht darin, Filtereffekte auf den Container </desc> zu verwenden

</g>

</g>

<desc> Das dritte Bild besteht darin, den Filtereffekt auf den internen Container zu verwenden. Achten Sie auf die Differenz vom zweiten Bild </desc>

</g>

</g>

<desc> Das vierte Bild besteht darin, Filtereffekte auf grafische Elemente </desc> zu verwenden

<Polygon Points = "160,25 160,125 240,75" fill = "blau"

filter = "url (#shiftbgandblur)"/>

</g>

</g>

<desc> Das fünfte Bild besteht darin, verschiedene Filtereffekte auf Grafikelemente zu verwenden </desc>

<Polygon Points = "160,25 160,125 240,75" fill = "blau"

filter = "url (#shiftbgandblur_withSourceGraphic)"/>

</g>

</g>

</svg>

Die Renderings sind wie folgt (die erste Reihe sind die endgültigen Renderings, und die zweite Reihe ist der Filtereffekt):

Dieses Beispiel enthält 5 Teile :

1. Die Bilder in der ersten Gruppe verwenden keine Filtereffekte.

2. Die zweite Gruppe verwendet dasselbe Bild, ermöglicht jedoch den Effekt der Verwendung des Hintergrunds.

3. Die dritte Gruppe verwendet dasselbe Bild, verwendet jedoch den Filtereffekt im internen Behälter.

4. Die vierte Gruppe verwendet Filtereffekte auf die Elemente des Inhaltsbehälters.

5. Die letzte Gruppe verwendet denselben Filtereffekt wie die vierte Gruppe und verschmilzt das Quellbild.

Das Konzept der Filter ist eigentlich sehr einfach, aber der Code für jeden Effekt sieht komplizierter aus. Tatsächlich werden wir nach dem Versuch klar sein. Da verschiedene Browser SVG jedoch unterschiedlich unterstützen, sollte der spezifische Effekt selbst vor dem Einsatz von Ihnen selbst ausprobiert werden.

Praktische Referenz

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/