SVG-Filter – Gaussian Blur, Schatten und Lichteffekte

SVG-Filter erzeugen visuelle Effekte wie blur, drop shadows, lighting, Änderungen der Sättigung, hue rotation und Kanal-Anpassungen direkt im SVG-Markup. Dieses Tutorial erklärt, wie Filter in <defs> definiert werden, wie Filterprimitive zusammenarbeiten und wie Sie einen Filter auf shapes, Text oder Bilder anwenden.

Quick Answer: Definieren Sie ein SVG-<filter> in <defs>, fügen Sie ein oder mehrere Filterprimitive wie <feGaussianBlur>, <feOffset>, <feBlend>, <feSpecularLighting> oder <feColorMatrix> hinzu und wenden Sie den Filter mit filter="url(#filter-id)" auf das Zielelement an.

1<svg width="220" height="140" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3    <filter id="soft-blur">
4      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
5    </filter>
6  </defs>
7  <circle cx="110" cy="70" r="45" fill="#20b2aa" filter="url(#soft-blur)" />
8</svg>

In diesem Artikel lernen Sie, wie Sie:

einen SVG-Filter definieren und mit dem filter-Attribut anwenden;
Filterprimitive zu blur-, shadow-, lighting- und color effects kombinieren;
filter regions steuern, damit das Ergebnis nicht abgeschnitten wird;
zwischen <feGaussianBlur>, <feColorMatrix> und <feComponentTransfer> wählen;
typische Rendering-Probleme in SVG-Filtern beheben.

Was ist ein SVG-Filter?

SVG-Filter fügen Bitmap- oder Vektorgrafiken visuelle Effekte hinzu, bevor das endgültige Ergebnis gerendert wird. Ein Filter kann ein Element weichzeichnen, einen Schatten erzeugen, Farbkanäle verändern, Licht hinzufügen, Pixel verzerren oder mehrere Zwischenergebnisse zu einem Effekt kombinieren. Da der Effekt Teil des SVG-Markups bleibt, kann er mit der Vektorgrafik skalieren und weiterhin bearbeitet werden.

Ein Filter wird mit einem <filter>-Element definiert, das in einem <defs>-Block steht. Das <filter> selbst wird nicht gerendert. Seine Kinder, die Filterprimitive, erledigen die eigentliche Arbeit. Das <filter>-Element definiert das Koordinatensystem und den Bereich, in dem alle Filterprimitive arbeiten. Es unterstützt diese wichtigen Attribute:

x, y, width, height – definieren den rechteckigen Bereich der Grafik, auf den der Filter angewendet wird
filterUnits – legt das Koordinatensystem für die Filterregion fest (userSpaceOnUse oder objectBoundingBox)
primitiveUnits – definiert das Koordinatensystem, das Filterprimitive innerhalb des Filters verwenden
Core und presentation attributes – allgemeine SVG-Attribute wie id, class, style und presentation properties

SVG-Filter und Filterprimitive

SVG-Filter entstehen durch die Kombination mehrerer Filterprimitive.

Jedes Filterprimitiv führt eine einzelne grafische Operation aus und erzeugt ein Ergebnis. Durch Verkettung der Primitive entstehen komplexe Effekte. Die Ausgabe eines Primitivs kann zur Eingabe des nächsten werden.
Die meisten Filterprimitive nehmen ein oder zwei benannte Eingaben und erzeugen ein Ergebnis. Die Haupteingabe wird im Attribut in angegeben. Standard ist in="SourceGraphic". Die Ausgabe wird mit dem Attribut result benannt, damit ein anderes Primitiv sie wiederverwenden kann.
Jedes Filterprimitiv kann außerdem einen eigenen Verarbeitungsbereich mit x, y, width und height definieren. Dieser Bereich wird relativ zur <filter>-Region aufgelöst.

Die folgende Tabelle gibt einen Überblick über häufige SVG-Filterelemente, ihren Zweck und wichtige Attribute. Die meisten Zeilen sind Filterprimitive. Lichtquellen wie <fePointLight> werden innerhalb von Lighting-Primitiven verwendet.

Kategorie	Filterelement	Zweck	Wichtige Attribute
Gaussian Blur	`<feGaussianBlur>`	Weichzeichnet das Eingabebild mit einer Gaussian-Funktion	`in`, `stdDeviation`, `result`
Drop Shadow	`<feOffset>`	Verschiebt den Alpha-Kanal, um die Schattenbasis zu erzeugen	`in`, `dx`, `dy`, `result`
Drop Shadow	`<feGaussianBlur>`	Macht den verschobenen Schatten weich	`in`, `stdDeviation`, `result`
Drop Shadow	`<feBlend>`	Mischt den Schatten mit der Originalgrafik	`in`, `in2`, `mode`
Lichteffekte	`<feGaussianBlur>`	Glättet den Alpha-Kanal, der als bump map verwendet wird	`in`, `stdDeviation`, `result`
Lichteffekte	`<feSpecularLighting>`	Erzeugt spiegelnde Beleuchtung mit einer Lichtquelle	`in`, `surfaceScale`, `specularConstant`, `specularExponent`, `lighting-color`, `result`
Lichteffekte	`<feDiffuseLighting>`	Erzeugt diffuse Beleuchtung mit einer Lichtquelle	`in`, `surfaceScale`, `diffuseConstant`, `lighting-color`, `result`
Lichteffekte	`<fePointLight>`	Definiert eine Punktlichtquelle für Lighting-Primitiven	`x`, `y`, `z`
Lichteffekte	`<feComposite>`	Kombiniert Beleuchtung mit der source graphic	`in`, `in2`, `operator`, `k1`, `k2`, `k3`, `k4`, `result`
Lichteffekte	`<feMerge>`	Führt mehrere Filterergebnisse zu einer Ausgabe zusammen	–
Farbfilter	`<feColorMatrix>`	Wendet matrixbasierte Farbtransformationen an	`in`, `type`, `values`, `result`
Farbfilter	`<feComponentTransfer>`	Wendet Farbübertragungsfunktionen pro Kanal an	`in`, `result`

Jeder Filter benötigt ein Eingabebild oder eine source graphic, die verarbeitet werden kann. Ohne Eingabe gibt es nichts zu rendern. Die Attribute in und result sind wichtig, weil sie die Ausgabe eines Primitivs an das nächste Primitiv in der Kette weitergeben.

So erstellen Sie SVG-Filter

Fügen Sie einen <defs>-Block hinzu, der Filterdefinitionen enthält, die nicht selbst gerendert werden sollen.
Erstellen Sie ein <filter>-Element und geben Sie ihm eine stabile id.
Fügen Sie ein oder mehrere Filterprimitive hinzu, zum Beispiel <feGaussianBlur>, <feOffset>, <feBlend> oder <feColorMatrix>.
Verwenden Sie in und result, wenn ein späteres Primitiv die Ausgabe eines früheren Primitivs nutzen soll.
Vergrößern Sie x, y, width und height, wenn blur, shadow oder lighting über die ursprüngliche Form hinausragen.
Wenden Sie den Filter mit filter="url(#id)" auf die Zielform, den Text, die Gruppe oder das Bild an.

Gaussian Blur

Gaussian blur macht ein Bild oder eine Form weicher, indem benachbarte Pixel nach einer Gaussian-Funktion verteilt werden. In SVG wird dieser Effekt häufig für Schatten, glow effects, soft focus, reduzierte Details und gerichtete Unschärfe verwendet.

Das Primitiv <feGaussianBlur> erzeugt die Weichzeichnung. Das Attribut stdDeviation steuert den Blur-Radius. Ein einzelner Wert zeichnet in beide Richtungen gleich weich. Zwei Werte erzeugen gerichtete Unschärfe: Der erste Wert wirkt entlang der x-Achse, der zweite entlang der y-Achse.

Das folgende Beispiel vergleicht verschiedene stdDeviation-Werte in einer SVG-Datei ( gaussian-blur.svg):

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
 4            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
 5        </filter>
 6        <filter id="f2" x="-20%" y="-20%" width="140%" height="140%">
 7            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
 8        </filter>
 9        <filter id="f3" x="-20%" y="-20%" width="140%" height="140%">
10            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
11        </filter>
12    </defs>
13    <g stroke="none" fill="#20B2AA">
14        <ellipse cx="60" cy="80" rx="55" ry="35" />
15        <ellipse cx="200" cy="80" rx="55" ry="35" filter="url(#f1)" />
16        <ellipse cx="340" cy="80" rx="55" ry="35" filter="url(#f2)" />
17        <ellipse cx="500" cy="80" rx="55" ry="35" filter="url(#f3)" />
18    </g>
19</svg>

Vier Ellipsen zeigen den Gaussian-Blur-Effekt mit unterschiedlichen stdDeviation-Werten

Blur vergrößert das sichtbare Ergebnis meist über die ursprüngliche Form hinaus. Wenn die Filterregion zu klein ist, werden die weichen Kanten abgeschnitten. Das Beispiel erweitert die Filterregion mit negativen x- und y-Werten, damit die weichgezeichneten Ränder sichtbar bleiben.

Sie können einen Gaussian-Blur-Effekt in C# mit der Aspose.SVG for .NET API erstellen. Weitere Informationen zum Namespace Aspose.Svg.Filters und detaillierte C#-Beispiele zur Klasse SVGFEGaussianBlurElement finden Sie im Artikel Gaussian Blur.

Drop-Shadow-Effekt

Ein drop shadow trennt eine Form oder einen Text vom Hintergrund. In SVG wird ein Schatten normalerweise aus dem SourceAlpha-Kanal, einem Offset, einer Weichzeichnung und einem blend- oder merge-Schritt aufgebaut.

Das Filterprimitiv <feOffset> verschiebt eine Ebene in SVG. Neben den Attributen in und result akzeptiert dieses Primitiv zwei Hauptattribute: dx und dy. Sie definieren, wie weit die Ebene entlang der x- bzw. y-Achse verschoben wird. Das Filterprimitiv <feBlend> mischt zwei Eingabeebenen; sein Attribut mode legt den blend mode fest.

Das folgende SVG erzeugt einen weichen drop shadow für eine Ellipse ( drop-shadow-effect.svg):

 1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
 4            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
 5            <feGaussianBlur result="blur" in="offset" stdDeviation="10" />
 6            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
 7        </filter>
 8    </defs>
 9    <ellipse cx="95" cy="90" rx="75" ry="55" fill="#20B2AA" filter="url(#shadow)" />
10</svg>

Drop-Shadow-Effekt auf einer Ellipse

Schrittweise Erklärung

<feOffset> nimmt in="SourceAlpha", verschiebt die Alphamaske 10 px nach rechts und 10 px nach unten und speichert das Zwischenergebnis als "offset". Mit SourceAlpha entsteht der Schatten aus der Formkontur, nicht aus der Füllfarbe.
<feGaussianBlur> nimmt in="offset", wendet eine Weichzeichnung mit dem Wert 10 an und speichert das Ergebnis in einem temporären Puffer namens "blur".
<feBlend> nimmt in="SourceGraphic" und in2="blur" und zeichnet die Originalellipse zusammen mit dem weichgezeichneten, verschobenen Schatten.

Drop-Shadow-Effekt der Ellipse Schritt für Schritt

Sie können einen drop shadow effect in C# mit der Aspose.SVG for .NET API erstellen. Der Artikel Drop Shadow Effect erklärt den Namespace Aspose.Svg.Filters und zeigt detaillierte C#-Beispiele für Schatteneffekte auf SVG-Formen und Text.

SVG-Lichteffekte

SVG-Lichteffekte werden innerhalb eines <filter> mit Lighting-Primitiven wie <feDiffuseLighting> und <feSpecularLighting> sowie Lichtquellen wie <fePointLight> erstellt. Die Lighting-Primitiven verwenden den SourceAlpha-Kanal als surface map und berechnen, wie Licht auf dieser Oberfläche erscheinen soll.

Das Element <fePointLight> definiert eine Punktlichtquelle und wird als Kind von <feDiffuseLighting> oder <feSpecularLighting> verwendet. Seine Attribute x, y und z setzen die Lichtposition. Diffuse lighting erzeugt eine matte beleuchtete Fläche, während specular lighting einen glänzenderen Highlight-Effekt erzeugt.

Betrachten Sie ein Beispiel für einen Lichteffekt ( light-effect.svg):

 1<svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id = "F1">
 4            <feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur" />
 5            <feSpecularLighting result = "light" in = "blur" specularExponent = "25" lighting-color = "#bbbbbb">
 6                <fePointLight x = "80" y = "60" z = "200" />
 7            </feSpecularLighting>
 8            <feComposite in = "SourceGraphic" in2 = "light" operator = "arithmetic" k1 ="0" k2 ="1" k3 ="1" k4 ="0" />
 9        </filter>
10    </defs>
11    <g  fill = "INDIANRED" filter = "url(#F1)">
12        <circle cx="100" cy="100" r="60" />
13        <circle cx="100" cy="230" r="60" />
14        <circle cx="230" cy="100" r="60" />
15        <circle cx="230" cy="230" r="60" />
16    </g>
17</svg>

Ergebnis des Lichteffekts auf vier roten Kreisen

Schrittweise Erklärung

In diesem Beispiel entsteht der Lichteffekt durch eine Kette von SVG-Elementen innerhalb eines <filter>: Drei Elemente sind Filterprimitive, und <fePointLight> definiert die Lichtquelle.

<feGaussianBlur> nimmt SourceAlpha als Eingabe, also den Alpha-Kanal des Quellbildes. Das Ergebnis wird in einem temporären Puffer namens "blur" gespeichert.
Die Beleuchtung entsteht mit <feSpecularLighting> und seinem Kind <fePointLight>. <feSpecularLighting> verwendet den Puffer "blur" als Höhenkarte der Oberfläche und speichert den Glanzpunkt in "light".
<feComposite> nimmt in="SourceGraphic" und in2="light" und kombiniert beide mit der arithmetic compositing operation. Für jedes Pixel berechnet der arithmetische Operator: result = k1·in1·in2 + k2·in1 + k3·in2 + k4.

Der folgende Code demonstriert ein weiteres Beispiel für das Verketten von Filterprimitiven und einer Lichtquelle innerhalb eines <filter> ( button.svg):

 1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="myF" x="-20%" y="-20%" width="160%" height="160%">
 4            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
 5            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
 6            <feSpecularLighting in="offsetBlur" surfaceScale="8" specularConstant="0.7" specularExponent="2" lighting-color="#bbbbbb" result="specOut">
 7                <fePointLight x="-100" y="-100" z="100" />
 8            </feSpecularLighting>
 9            <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
10            <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1.5" k2="0.5" k3="1" k4="0" result="litPaint" />
11            <feMerge>
12                <feMergeNode in="offsetBlur" />
13                <feMergeNode in="litPaint" />
14            </feMerge>
15        </filter>
16    </defs>
17    <ellipse cx="85" cy="70" rx="65" ry="45" fill="#20B2AA" filter="url(#myF)" />
18    <g fill="#696969" font-size="25" font-family="arial">
19        <text x="55" y="80">PUSH</text>
20    </g>
21</svg>

Blauer Button mit PUSH-Text, erzeugt durch eine Kette von Lighting-Primitiven

In SVG Lighting Effects erfahren Sie, wie Sie Filterprimitive und Lichtquellen kombinieren, um SVG-Lichteffekte in C# mit der Aspose.SVG for .NET API zu erstellen und zu steuern.

Farbfilter

In SVG können Sie viele Farbeffekte erstellen, die in fast allen modernen Browsern unterstützt werden. Für Farbverarbeitung ist <feColorMatrix> häufig die beste Wahl. Es ist ein Filterprimitiv, das eine Matrix verwendet, um Farbwerte für jeden RGBA-Kanal zu verändern. <feComponentTransfer> ist ein weiteres leistungsfähiges SVG-Filterprimitiv. Es steuert einzelne RGBA-Kanäle des Bildes und ermöglicht Photoshop-ähnliche SVG-Effekte, zum Beispiel posterized images.

Dieser Abschnitt konzentriert sich auf zwei praktische Farbprimitive: <feColorMatrix> für matrixbasierte Transformationen und <feComponentTransfer> für kanalweise Änderungen.

feColorMatrix-Beispiel für Sättigung

Das Filterprimitiv <feColorMatrix> wendet eine Matrixtransformation auf die RGBA-Kanäle jedes Pixels im Eingabebild an. Dadurch entsteht ein neuer Satz von Farb- und Alphawerten. Das Attribut type kann folgende Werte haben:

matrix – eigene 5×4-Matrix
saturate – passt die Sättigung an
hueRotate – rotiert hue um den Farbkreis
luminanceToAlpha – konvertiert luminance zu alpha

Schauen wir uns Beispiele für die Operation saturate an ( saturation.svg):

1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2    <defs>
3        <filter id="myFilter">
4            <feColorMatrix in="SourceGraphic" type="saturate" values="0"></feColorMatrix>
5        </filter>
6    </defs>
7    <image filter="url(#myFilter)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
8</svg>

Bildreihe mit unterschiedlichen Saturation-Werten

feColorMatrix-Beispiel für Hue Rotation

Eine spezielle color-matrix operation ist die hue rotation um den color wheel. Das folgende Beispiel zeigt die Operation hueRotate.

1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2    <defs>
3        <filter id="hueR">
4            <feColorMatrix in="SourceGraphic" type="hueRotate" values="40"></feColorMatrix>
5        </filter>
6    </defs>
7    <image filter="url(#hueR)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
8</svg>

Die folgende Abbildung enthält eine Bildreihe mit unterschiedlichen hueRotate-Werten.

Bildreihe mit verschiedenen hueRotate-Werten

feComponentTransfer-Beispiel für Kanalmanipulation

Das Primitiv <feComponentTransfer> führt Operationen pro Kanal auf RGBA-Werten aus. Es eignet sich für Helligkeitsanpassungen, Kontraständerungen, channel balancing und posterized color effects.

Das folgende Beispiel verändert rote, grüne und blaue Kanäle unabhängig voneinander:

 1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="RGBA">
 4            <feComponentTransfer>
 5                <feFuncR type="linear" slope="2.0" />
 6                <feFuncG type="linear" slope="1.7" />
 7                <feFuncB type="linear" slope="0.1" />
 8                <feFuncA type="identity" />
 9            </feComponentTransfer>
10        </filter>
11    </defs>
12    <image filter="url(#RGBA)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
13</svg>

Foto mit benutzerdefiniertem RGBA component transfer

Das Element <feComponentTransfer> verändert Farbkanäle über untergeordnete transfer function elements: <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA>. Jedes Kind steuert den roten, grünen, blauen oder Alpha-Kanal. Das Attribut type wählt die transfer function für diesen Kanal. SVG unterstützt fünf Funktionstypen: identity, table, discrete, linear und gamma.

Lesen Sie den Artikel Color Filters, wenn Sie Farbfilter in C# erstellen möchten. Dort lernen Sie die Filterprimitive feColorMatrix und feComponentTransfer kennen und sehen C#-Codebeispiele zu ihrer Verwendung.

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
Filterergebnis wird abgeschnitten	Die Filterregion (`x`, `y`, `width`, `height`) ist zu klein	Vergrößern Sie die Filterregion mit negativen `x`- und `y`-Werten sowie größeren `width`- und `height`-Werten
Drop shadow ist nicht sichtbar	Der Schatten verwendet `SourceGraphic` statt `SourceAlpha` oder wird falsch gemischt	Verwenden Sie `SourceAlpha` als Eingabe für `<feOffset>` und mischen Sie das Ergebnis mit der Originalgrafik
Lichteffekt wirkt flach oder unsichtbar	Der Alpha-Kanal wurde nicht als bump map vorbereitet oder die lighting-Werte sind zu niedrig	Weichzeichnen Sie `SourceAlpha` vor der Beleuchtung und passen Sie die lighting-Parameter an
Farben ändern sich unerwartet	Falsche color matrix oder transfer values werden angewendet	Wenden Sie Farbfilter direkt auf `SourceGraphic` an und prüfen Sie Werte Schritt für Schritt

Schnelle Rezepte

Einfachen Gaussian blur erstellen

1<filter id="blur">
2    <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
3</filter>

Gerichteten blur anwenden, horizontal oder vertikal

1<filter id="directionalBlur">
2    <feGaussianBlur in="SourceGraphic" stdDeviation="8 0" />
3</filter>

Weichen drop shadow hinzufügen

1<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
2    <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
3    <feGaussianBlur in="offset" stdDeviation="6" result="blur" />
4    <feBlend in="SourceGraphic" in2="blur" mode="normal" />
5</filter>

Weichgezeichneten Schatten auf die Originalform begrenzen

1<filter id="clippedShadow">
2    <feOffset in="SourceAlpha" dx="4" dy="4" result="offset" />
3    <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
4    <feComposite in="blur" in2="SourceAlpha" operator="in" result="shadow" />
5    <feComposite in="SourceGraphic" in2="shadow" operator="over" />
6</filter>

Bild in Graustufen umwandeln

1<filter id="grayscale">
2    <feColorMatrix type="saturate" values="0" />
3</filter>

Helligkeit und Kontrast anpassen

1<filter id="brightnessContrast">
2    <feComponentTransfer>
3        <feFuncR type="linear" slope="1.2" intercept="0.1" />
4        <feFuncG type="linear" slope="1.2" intercept="0.1" />
5        <feFuncB type="linear" slope="1.2" intercept="0.1" />
6    </feComponentTransfer>
7</filter>

Mehrere Filterergebnisse kombinieren

1<filter id="combined">
2    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
3    <feOffset in="blur" dx="4" dy="4" result="offset" />
4    <feMerge>
5        <feMergeNode in="offset" />
6        <feMergeNode in="SourceGraphic" />
7    </feMerge>
8</filter>

FAQ – SVG-Filter

Wie wende ich einen SVG-Filter auf ein Element an?

Definieren Sie den Filter in <defs> und wenden Sie ihn mit filter="url(#filter-id)" auf eine Form, ein Textelement, eine Gruppe oder ein Bild an. Die id in der Filterdefinition muss mit dem Wert im filter-Attribut übereinstimmen.

Warum wird mein SVG blur oder shadow abgeschnitten?

Blur- und shadow-Effekte reichen oft über die ursprünglichen Objektgrenzen hinaus. Vergrößern Sie die Filterregion mit x, y, width und height, damit die erzeugten Pixel genug Platz zum Rendern haben.

Was ist der Unterschied zwischen feColorMatrix und feComponentTransfer?

Verwenden Sie <feColorMatrix>, wenn eine Matrixoperation Farbwerte transformieren soll, zum Beispiel grayscale, saturation oder hue rotation. Verwenden Sie <feComponentTransfer>, wenn Sie getrennte Kontrolle über rote, grüne, blaue oder Alpha-Kanäle benötigen.

Kann ich SVG-Filter mit Aspose.SVG for .NET erstellen?

Ja. Der Artikel SVG Filters in C# zeigt, wie Sie SVG-Filter programmgesteuert mit Aspose.SVG for .NET erstellen.