Helpful resources ▼
  Download   Pricing   Buy

Farbfilter SVG– C#-Code

In diesem Artikel erfahren Sie mehr über die wichtigsten Farbfilter – <feColorMatrix> und <feComponentTransfer>. Hier finden Sie Beispiele, die zeigen, wie Sie SVG-Code schreiben, um Sättigungs-, HueRotate- und LuminanceToAlpha-Effekte zu erzeugen, sowie detaillierte C#-Beispiele für die Verwendung des Aspose.Svg.Filters-Namespace, um Farbfilter auf SVG-Elemente anzuwenden oder Bitmaps.

Farbfilter – Color Filters

Mit Aspose.SVG für .NET können Sie verschiedene SVG-Filtereffekte erstellen, die in fast allen modernen Browsern unterstützt werden. Wenn es um die Farbverarbeitung geht, ist <feColorMatrix> die beste Option. Dabei handelt es sich um eine Art Farbfilter, der mithilfe einer Matrix die Farbwerte für jeden RGBA-Kanal beeinflusst. Der <feComponentTransfer> ist eines der leistungsstärksten SVG-Filterprimitive. Es gibt die Kontrolle über die einzelnen RGBA-Kanäle des Bildes und ermöglicht Ihnen die Erstellung von Photoshop-ähnlichen SVG-Effekten; Beispielsweise kann es zum Posterisieren von Bildern verwendet werden.

Farbmatrix – Filterprimitiv <feColorMatrix>.

Die <feColorMatrix> ist einer der Hauptfarbfilter. Dieses Filterprimitiv wendet eine Matrixtransformation auf die RGBA-Kanäle jedes Pixels im Eingabebild an. Als Ergebnis wird ein neuer Satz von Farb- und Alphawerten erzeugt. Im allgemeinen Fall wird die Farbmatrix als Operation des Attributs type des Elements <feColorMatrix> geschrieben. In den Sonderfällen von Farbmatrizen werden die Hilfsoperationen des Typs verwendet: saturate, hueRotate, luminanceToAlpha.

Sättigungseffekt – Saturation Effect

Der Sättigungseffekt ist ein Sonderfall der Verwendung der Farbmatrix. Sehen wir uns Beispiele für die Operation saturate an, die im Attribut type des Filterprimitivs <feColorMatrix> verwendet wird:

1<svg xmlns="http://www.w3.org/2000/svg">
2    <image filter="url(#saturation-effect)" href="http://docs.aspose.com/svg/net/images/api/lighthouse.jpg" x="20" y="20" height="440" width="330" />
3    <defs>
4        <filter id="saturation-effect">
5            <feColorMatrix in="SourceGraphic" type="saturate" values="2"></feColorMatrix>
6        </filter>
7    </defs>
8</svg>

Der obige SVG-Code veranschaulicht die Entstehung des Sättigungseffekts und erinnert Sie daran, dass in SVG ein Filter durch ein <filter>-Element definiert wird, das innerhalb eines <defs>-Elements festgelegt wird. Es wird nie selbst gerendert und konzeptionell als ein Element beschrieben, das seine untergeordneten Elemente, die Filterprimitive, enthält.

Der folgende C#-Code erstellt eine SVG-Datei mit einem Bild mit erhöhter Sättigung, wodurch die Farben lebendiger erscheinen. Der Sättigungseffekt wird durch das Filterprimitiv <feColorMatrix> mit den im Code angegebenen Werten erreicht.

 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4using Aspose.Svg.DataTypes;
 5...
 6
 7    // Set SVG Namespace Url
 8    string SvgNamespace = "http://www.w3.org/2000/svg";
 9
10    using (var document = new SVGDocument())
11    {
12        var svgElement = document.RootElement;
13
14        // Create an <image> element and add to the <svg> element
15        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
16        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/net/images/api/lighthouse.jpg";
17        imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
18        imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
19        imageElement.Height.BaseVal.Value = 440;
20        imageElement.Width.BaseVal.Value = 330;
21        imageElement.X.BaseVal.Value = 20;
22        imageElement.Y.BaseVal.Value = 20;
23        imageElement.SetAttribute("filter", "url(#saturation)");
24        svgElement.AppendChild(imageElement);
25
26        // Create a <defs> element and add to the <svg> element
27        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
28        svgElement.AppendChild(defsElement);
29
30        // Creating a <filter> element and add to the <defs> element
31        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
32        filterElement.Id = "saturation";
33        defsElement.AppendChild(filterElement);
34
35        // Creating a <feColorMatrix> element and add to the <filter> element
36        var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
37        feColorMatrixElement.In1.BaseVal = "SourceGraphic";
38        feColorMatrixElement.SetAttribute("type", "saturate");
39        feColorMatrixElement.SetAttribute("values", "2");
40        filterElement.AppendChild(feColorMatrixElement);
41
42        // Save the document
43        document.Save(Path.Combine(OutputDir, "saturation-effect.svg"));
44    }

Betrachten wir den Code Schritt für Schritt:

  1. Erstellen Sie eine Instanz der Klasse SVGDocument.
  2. Die Eigenschaft RootElement der SVGDocument-Klasse zeigt auf das Stammelement <svg> des Dokuments.
  3. Erstellen Sie ein <image>-Element mit Attributen und fügen Sie es dem <svg>-Element hinzu:
    • Sie können die Methode CreateElementNS(namespaceURI, qualifizierterName) verwenden, um eine Instanz der Klasse SVGImageElement zu erstellen.
    • Legen Sie Attribute fest, die ihre Quelle, Position und Größe angeben. Die Verwendung eines filter-Attributs von imageElement, das auf den URL-Namen eines id-Attributs in filterElement verweist, ermöglicht die Anwendung des SVG-Filtereffekts auf das Bild.
    • Um ein imageElement zu svgElement hinzuzufügen, können Sie die Methode AppendChild() verwenden.
  4. Erstellen Sie ein <defs>-Element und fügen Sie es dem <svg>-Element hinzu:
    • Verwenden Sie die Methode CreateElementNS(), um eine Instanz der Klasse SVGDefsElement zu erstellen.
    • Verwenden Sie die AppendChild()-Methode, um das Element <defs> zum Element <svg> hinzuzufügen.
  5. Erstellen Sie ein <filter>-Element, legen Sie ein id-Attribut fest und fügen Sie <filter> zum <defs>-Element hinzu:
    • Verwenden Sie die Methode CreateElementNS(), um eine Instanz der Klasse SVGFilterElement zu erstellen.
    • Legen Sie eine filterElement.Id für das <filter>-Element fest, es kann auf das Bild angewendet werden.
    • Verwenden Sie die AppendChild()-Methode, um den <filter> zum <defs>-Element hinzuzufügen.
  6. Erstellen Sie ein <feColorMatrix>-Element, legen Sie Attribute fest und fügen Sie es dem <filter>-Element hinzu:
    • Verwenden Sie die Methode CreateElementNS(), um eine Instanz der Klasse SVGFEColorMatrix zu erstellen.
    • Rufen Sie die Methode SetAttribute(name, value) auf, um die Attribute type und value festzulegen.
    • Vergessen Sie nicht, das Attribut in1 festzulegen. Verwenden Sie die Eigenschaft des Typs SVGAnimatedLength, deren statische Daten über die Konstruktion feColorMatrixElement.In1.BaseVal = "SourceGraphic" festgelegt oder gelesen werden können.
    • Verwenden Sie die AppendChild()-Methode, um <feColorMatrix> zum <filter>-Element hinzuzufügen.
  7. Rufen Sie die Methode Save() auf, um das SVG-Dokument mit dem gesättigten Bild in einer durch den Pfad angegebenen lokalen Datei zu speichern.

HueRotate

Der spezielle Fall von Farbmatrizen ist die Bildrotation entlang des Farbkreises. Die Operation type="hueRotate" wird verwendet, um den Farbton eines Bildes oder Elements zu ändern. Mit hueRotate können Sie lebendige, satte Farbeffekte erzeugen und das Erscheinungsbild Ihrer Website-Elemente anpassen. hueRotate nimmt einen values an – den Drehwinkel in Grad. Dieser Winkel gibt den Winkel an, um den das Farbrad gedreht werden soll. Der Wert kann zwischen 0 und 360 liegen, wobei 0 und 360 den ursprünglichen Farbton darstellen und 180 eine Drehung um 180 Grad darstellt (die Farben werden umgekehrt).

Das folgende SVG-Beispiel veranschaulicht die Verwendung der Operation type="hueRotate" im Filterprimitiv <feColorMatrix>:

1<defs>
2    <filter id="hueRotate">
3        <feColorMatrix in="SourceGraphic" type="hueRotate" values="150"></feColorMatrix>
4    </filter>
5</defs>

Der folgende C#-Code erstellt ein Filterprimitiv <feColorMatrix> und fügt es einem vorhandenen SVG-Element <filter> hinzu, um mithilfe der Aspose.SVG für die .NET-API einen hueRotate-Effekt anzuwenden. Der Farbtonrotationseffekt ändert den Farbton der Eingabegrafik und verschiebt seine Farben effektiv im Farbkreis.

1    // Creating a <feColorMatrix> element and add to the <filter> element
2    var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
3    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
4    feColorMatrixElement.SetAttribute("type", "hueRotate");
5    feColorMatrixElement.SetAttribute("values", "150");
6    filterElement.AppendChild(feColorMatrixElement);

Bei dieser Abbildung handelt es sich um eine Reihe von Bildern mit verschiedenen type-Attributwerten. Die Abbildung zeigt das Quellbild (a), die vom Filter feColorMatrix verarbeiteten Bilder – nach dem Sättigungseffekt unter Anwendung von (b), hueRotate (c) und luminanceToAlpha (d).

Text „Eine Reihe von Bildern mit verschiedenen Werten des Farbmatrix-Attributs type – Saturate, HueRotate und LuminanceToAlpha.“

Farbkanäle – Filterprimitiv <feComponentTransfer>.

Das Filterprimitiv <feComponentTransfer> ist ein leistungsstarkes SVG-Element, mit dem Sie lineare, tabellarische und diskrete Operationen mit Bildkanälen durchführen und das Gamma jedes Kanals (RGBA) ändern können. Dies ermöglicht verschiedene Farbanpassungen und Effekte wie Kontraständerungen, Gammakorrektur, Farbinvertierung, Helligkeitsanpassung und mehr.

Normalerweise werden die Unterelemente <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA> mit <feComponentTransfer> verwendet. Sie definieren die Transformationsfunktionen für den roten, grünen, blauen und Alpha-Kanal und können Attribute wie type, tableValues, slope, intercept, amplitude, exponent, und offset enthalten, die das Verhalten der Transformation definieren. Im Attribut type wird der Funktionstyp bestimmt, der die Änderung dieser Komponente ermöglicht. Es gibt fünf Funktionstypen: identity, table, discrete, linear und gamma. Bei type="linear" gibt das Attribut slope die Steigung der linearen Funktion an. Wenn das Attribut nicht angegeben ist, ist die Wirkung so, als ob der Wert 1 angegeben wäre. Schauen wir uns ein SVG-Beispiel an:

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="330" width="440" x="10" y="10" filter="url(#rgba)" />
 3    <defs>
 4		<filter id="rgba">
 5			<feComponentTransfer>
 6				<feFuncR type="linear" slope="1.1"/>
 7				<feFuncG type="linear" slope="1.5"/>
 8				<feFuncB type="linear" slope="2.0"/>
 9				<feFuncA type="identity"/>
10			</feComponentTransfer>
11		</filter>
12	</defs>
13</svg>

Hier schreiben wir C#-Code, um den gleichen linearen Transformationseffekt des Bildkanals wie im obigen SVG-Code zu erzeugen.

 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4...
 5
 6    // Set SVG Namespace Url
 7    string SvgNamespace = "http://www.w3.org/2000/svg";
 8
 9    using (var document = new SVGDocument())
10    {
11        var svgElement = document.RootElement;
12
13        // Create an <image> element and add to the <svg> element
14        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
15        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
16        imageElement.Height.BaseVal.Value = 330;
17        imageElement.Width.BaseVal.Value = 440;
18        imageElement.X.BaseVal.Value = 10;
19        imageElement.Y.BaseVal.Value = 10;
20        imageElement.SetAttribute("filter", "url(#rgba)");
21        svgElement.AppendChild(imageElement);
22
23        // Create a <defs> element and add to the <svg> element
24        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
25        svgElement.AppendChild(defsElement);
26
27        // Creating a <filter> element and add to the <defs> element
28        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
29        filterElement.Id = "rgba";
30        defsElement.AppendChild(filterElement);
31
32        // Creating a <feComponentTransfer> element and add to the <filter> element
33        var feComponentTransferElement = (SVGFEComponentTransferElement)document.CreateElementNS(SvgNamespace, "feComponentTransfer");
34        filterElement.AppendChild(feComponentTransferElement);
35
36        // Creating a <feFuncR> element and add to the <feComponentTransfer> element
37        var feFuncRElement = (SVGFEFuncRElement)document.CreateElementNS(SvgNamespace, "feFuncR");
38        feFuncRElement.SetAttribute("type", "linear");
39        feFuncRElement.SetAttribute("slope", "1.1");
40        feComponentTransferElement.AppendChild(feFuncRElement);
41
42        // Creating a <feFuncG> element and add to the <feComponentTransfer> element
43        var feFuncGElement = (SVGFEFuncGElement)document.CreateElementNS(SvgNamespace, "feFuncG");
44        feFuncGElement.SetAttribute("type", "linear");
45        feFuncGElement.SetAttribute("slope", "1.5");
46        feComponentTransferElement.AppendChild(feFuncGElement);
47
48        // Creating a <feFuncB> element and add to the <feComponentTransfer> element
49        var feFuncBElement = (SVGFEFuncBElement)document.CreateElementNS(SvgNamespace, "feFuncB");
50        feFuncBElement.SetAttribute("type", "linear");
51        feFuncBElement.SetAttribute("slope", "2.0");
52        feComponentTransferElement.AppendChild(feFuncBElement);
53
54        // Creating a <feFuncA> element and add to the <feComponentTransfer> element
55        var feFuncAElement = (SVGFEFuncAElement)document.CreateElementNS(SvgNamespace, "feFuncA");
56        feFuncAElement.SetAttribute("type", "identity");
57        feComponentTransferElement.AppendChild(feFuncAElement);
58
59        // Save the document
60        document.Save(Path.Combine(OutputDir, "rgba.svg"));
61    }

Die Abbildung zeigt das Quellbild (a) und die vom Filter „feComponentTransfer“ verarbeiteten Bilder (b, c).

Text „Das Ergebnis der Anwendung des feComponentTransfer-Filters“

Siehe auch

  • Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen.
  • Informationen zum Herunterladen von GitHub und zum Ausführen von Beispielen finden Sie im Abschnitt So führen Sie die Beispiele aus.
  • Weitere Informationen zu Filterprimitiven finden Sie auf der Seite W3C Filter Effects Module und im Artikel SVG-Filter und -Verläufe.
  • Aspose.SVG bietet kostenlose SVG-Webanwendungen zum Konvertieren von SVG- oder Bilddateien, Zusammenführen von SVGs, Bildvektorisierung, SVG-Sprite-Generierung, SVG-zu-Base64-Datenkodierung und mehr. Diese Online-Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Es ist eine schnelle und einfache Möglichkeit, Ihre SVG-bezogenen Aufgaben effizient und effektiv zu lösen!
SVG-Lichteffekte SVG-Verläufe
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2024. All Rights Reserved.