Helpful resources ▼
  Download   Pricing   Buy

SVG-Lichteffekte – SVG-Filter – C#-Code

SVG-Lichteffekte

Mit Aspose.SVG für .NET können Sie verschiedene Lichteffekte erstellen, um die visuelle Attraktivität von Grafiken und Illustrationen zu verbessern. Lichteffekte können flachen Bildern Tiefe, Realismus und ein Gefühl von Licht verleihen. Der Lichteffekt wird in SVG mithilfe einer Reihe von Filtern erstellt. Betrachten Sie einige davon: <feSpecularLighting> und <fePointLight>. Sie können mehrere Filter kombinieren, Details für einen Lichteffekt erstellen und steuern.

In diesem Artikel erfahren Sie, wie Sie SVG-Code schreiben, um SVG-Lichteffekte zu erstellen, und betrachten detaillierte C#-Beispiele für die Verwendung des Aspose.Svg.Filters-Namespace, um die Lichteffekte auf SVG-Elemente oder Bitmaps anzuwenden.

Punktlichtquelle – SVG-Code

Der Filter <fePointLight> definiert eine Lichtquelle, die einen Punktlichteffekt setzt. Es kann innerhalb des Grundelements <feDiffuseLighting> oder <feSpecularLighting> als untergeordnetes Element verwendet werden. Spezifische Attribute x, y und z geben die Position der Punktlichtquelle an. Der Filter <feSpecularLighting> beleuchtet ein Bild mithilfe seines Alphakanals als Bump-Map. Betrachten Sie ein SVG-Beispiel für einen Lichteffekt:

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<rect x="40" y="40" width="150" height="150" fill="Teal" filter="url(#light)"/>
 3	<defs>
 4		<filter id="light">
 5			<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
 6			<feSpecularLighting in="blur" result="light" specularExponent="30" lighting-color="#ddd">
 7				<fePointLight x="70" y="70" z="150"/>
 8			</feSpecularLighting>
 9			<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
10		</filter>
11	</defs>
12</svg>
  1. <feGaussianBlur> übernimmt die Eingabe SourceAlpha, also den Alphakanal des Quellbilds. Das Ergebnis wird in einem temporären Puffer namens blur gespeichert.
  2. Die Beleuchtung erfolgt mit den Filterprimitiven <feSpecularLighting> und <fePointLighting>. <feSpecularLighting> verwendet den Puffer blur als Modell einer Oberflächenhöhe und generiert einen Lichteffekt aus einer Punktquelle, die im Filter <fePointLighting> festgelegt wird. Das Ergebnis wird im Puffer light gespeichert.
  3. Der <feComposite>-Filter nimmt zwei Eingaben in ="SourceGraphic" und in2 ="light" und kombiniert sie mithilfe der arithmetischen Kompositionsoperation. Die Ausgabe des arithmetischen Operators für jedes Ergebnispixel wird wie folgt berechnet: k1·in1·in2 + k2·in1 + k3·in2 + k4

In diesem Beispiel werden vier SVG-Filter angewendet, um den Lichteffekt zu erzeugen (Abbildung b):

Wenn wir den Gaußschen Unschärfefilter im Code für den “light”-Filter entfernen (Abbildung b), erhalten wir den folgenden “flat-light”-Filter, der ein flacheres Licht ergibt (Abbildung c):

1<filter id="flat-light">
2    <feSpecularLighting  result="light" specularExponent="30" lighting-color="#ddd">
3        <fePointLight x="70" y="70" z="150"/>
4    </feSpecularLighting>
5    <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
6</filter>

Text „Ein Lichteffekt wurde auf das Rechteck angewendet: a – Originalbild, b – Bild mit angewendetem “light”-Filter, c – Bild mit angewendetem “flat-light”-Filter.“

SVG-Lichtquelle – C#-Code

Der folgende C#-Codeausschnitt zeigt, wie Sie denselben SVG-Lichteffekt (“light”-Filter) wie im obigen SVG-Code erstellen. Betrachten wir den C#-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 <defs>-Element und fügen Sie es dem <svg>-Element hinzu:
  4. 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. Verwenden Sie die Eigenschaft Id der SVGElement-Klasse.
    • Verwenden Sie die AppendChild()-Methode, um den <filter> zum <defs>-Element hinzuzufügen.
  5. Erstellen Sie ein <feGaussianBlur>-Element und legen Sie die Attribute in, result und stdDeviation fest. Fügen Sie es dann dem Element <filter> hinzu.
    • Verwenden Sie die Methode CreateElementNS(), um eine Instanz der Klasse SVGFEGaussianBlurElement zu erstellen.
    • Rufen Sie die Methode SetAttribute(name, value) auf, um die Attribute In1 und result festzulegen.
    • Verwenden Sie die Eigenschaften StdDeviationX und StdDeviationY der SVGFEGaussianBlurElement-Klasse, um das setDerivation-Attribut festzulegen.
    • Verwenden Sie die AppendChild()-Methode, um <feGaussianBlur> zum <filter>-Element hinzuzufügen.
  6. Erstellen Sie die Elemente <feSpecularLighting>, <fePointLight> und <feComposite> auf die gleiche Weise. Geben Sie die erforderlichen Attribute an und fügen Sie diese Elemente in der richtigen Reihenfolge zum Filter hinzu.
  7. Erstellen Sie ein <rect>-Element mit Attributen und fügen Sie es dem <svg>-Element hinzu:
    • Sie können die Methode CreateElementNS() verwenden, um eine Instanz der Klasse SVGRectElement zu erstellen.
    • Legen Sie Attribute fest, die Position, Größe und Füllung angeben. Die Verwendung eines filter-Attributs, das auf den URL-Namen eines id-Attributs in filterElement verweist, ermöglicht die Anwendung des SVG-Lichteffekts auf das Rechteck.
    • Um das rectElement zu svgElement hinzuzufügen, können Sie die AppendChild()-Methode verwenden.
  8. Rufen Sie die Methode Save() auf, um das resultierende SVG-Bild in einer durch den Pfad angegebenen lokalen Datei zu speichern.
 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4...
 5    // Set SVG Namespace Url
 6    string SvgNamespace = "http://www.w3.org/2000/svg";
 7
 8    using (var document = new SVGDocument())
 9    {
10        var svgElement = document.RootElement;
11
12        // Create a <defs> element and add to the svgElement
13        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
14        svgElement.AppendChild(defsElement);
15
16        // Creating a <filter> element and add to the defsElement
17        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
18        filterElement.Id = "light";
19        defsElement.AppendChild(filterElement);
20
21        // Create a <feGaussianBlur> element and add to the filterElement
22        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
23        feGaussianBlurElement.StdDeviationX.BaseVal = 5;
24        feGaussianBlurElement.StdDeviationY.BaseVal = 5;
25        feGaussianBlurElement.SetAttribute("in1", "SourceAlpha");
26        feGaussianBlurElement.SetAttribute("result", "blur");
27        filterElement.AppendChild(feGaussianBlurElement);
28
29        // Create a feSpecularLighting filter primitive and add it to the filterElement
30        var feSpecularLightingElement = (SVGFESpecularLightingElement)document.CreateElementNS(SvgNamespace, "feSpecularLighting");
31        feSpecularLightingElement.In1.BaseVal = "blur";
32        feSpecularLightingElement.SetAttribute("result", "light");
33        feSpecularLightingElement.SetAttribute("specularExponent", "30");
34        feSpecularLightingElement.SetAttribute("lighting-color", "#ddd");
35        filterElement.AppendChild(feSpecularLightingElement);
36
37        // Create a fePointLight filter primitive and add it to the <feSpecularLighting> element
38        var fePointLightElement = (SVGFEPointLightElement)document.CreateElementNS(SvgNamespace, "fePointLight");
39        fePointLightElement.SetAttribute("x", "70");
40        fePointLightElement.SetAttribute("y", "70");
41        fePointLightElement.SetAttribute("z", "150");
42        feSpecularLightingElement.AppendChild(fePointLightElement);
43
44        // Create a feComposite filter primitive and add it to the filterElement
45        var feCompositeElement = (SVGFECompositeElement)document.CreateElementNS(SvgNamespace, "feComposite");
46        feCompositeElement.In1.BaseVal = "SourceGraphic";
47        feCompositeElement.In2.BaseVal = "light";
48        feCompositeElement.SetAttribute("operator", "arithmetic");
49        feCompositeElement.SetAttribute("k1", "0");
50        feCompositeElement.SetAttribute("k2", "1");
51        feCompositeElement.SetAttribute("k3", "1");
52        feCompositeElement.SetAttribute("k4", "0");
53        filterElement.AppendChild(feCompositeElement);
54
55        // Create a <rect> element and set the "fill" and "filter" attributes
56        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
57        rectElement.X.BaseVal.Value = 40;
58        rectElement.Y.BaseVal.Value = 40;
59        rectElement.Width.BaseVal.Value = 150;
60        rectElement.Height.BaseVal.Value = 150;
61        rectElement.SetAttribute("fill", "Teal");
62        rectElement.SetAttribute("filter", "url(#light)");
63        svgElement.InsertBefore(rectElement, svgElement.FirstChild);
64
65        // Save the document
66        document.Save(Path.Combine(OutputDir, "lighting-effect.svg"));
67    }

Das resultierende Bild, lighting-effect.svg, sieht genauso aus wie in Abbildung b oben.

Siehe auch

Schlagschatteneffekt Farbfilter
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

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