Schlagschatten – SVG-Filter – C#-Code

SVG-Filter

Mit Aspose.SVG for .NET können Sie ein SVG-Dokument öffnen, erstellen oder bearbeiten und Änderungen an seinem Inhalt vornehmen. Sie können viele verfügbare SVG-Filter für SVG-Elemente oder Bitmaps anwenden, um das gewünschte Ergebnis zu erzielen. Der Namespace Aspose.Svg.Filters enthält Klassen und Schnittstellen, die sich auf Filtereffekte in der SVG-Spezifikation beziehen. Um einen Schlagschatteneffekt zu erzeugen, können Sie einige Filterprimitive verwenden:

• die Klasse SVGFEDropShadowElement zum Erstellen eines <feDropShadow>-Elements zur Implementierung des Schlagschatteneffekts;
• die Klasse SVGFEOffsetElement zum Erstellen eines <feOffset>-Elements zum Versetzen einer Ebene in SVG;
• Die Klasse SVGFEGaussianBlurElement entspricht einem <feGaussianBlur>-Element zur Implementierung des Gaußschen Weichzeichnungseffekts;
• das SVGFEBlendElement zum Erstellen eines <feBlend>-Elements zum Verschmelzen von zwei oder mehr Objekten.

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

Schlagschatten – SVG-Code

Der Schatteneffekt in SVG ist ein gängiger visueller Effekt, der verwendet wird, um die Illusion eines Schattens hinter einem SVG-Element zu erzeugen. Es verleiht SVG-Inhalten Tiefe und Realismus, indem es so aussieht, als würde das Element über dem Hintergrund schweben. Außerdem kann ein Schlagschatteneffekt verwendet werden, um ein Bild hervorzuheben. Es gibt mehrere Möglichkeiten, den Schatteneffekt in SVG zu implementieren. Schauen wir uns zwei davon an.

Hinweis: In SVG wird der Filter durch das Element <filter> definiert, das innerhalb eines <defs>-Elements festgelegt wird. Es wird nie selbst gerendert und konzeptionell als das Element beschrieben, das seine untergeordneten Elemente – Filterprimitive – einschließt. Das Element <filter> verfügt über eine Reihe von Attributen. Erforderliche Attribute für das Filterprimitiv sind x, y, width, height, und id. Sie legen den Bereich des Bildes fest, auf den der Filter angewendet wird. Und das Attribut id gibt einem SVG-Element eine eindeutige Kennung und identifiziert ein Element innerhalb eines SVG-Dokuments.

Filterprimitive feOffset + feGaussianBlur + feBlend.

Unserer Meinung nach ist es am effektivsten, drei Filter zu verwenden, um den Schatteneffekt zu erzielen. Dadurch können Sie den Effekt optimieren, auch wenn dafür mehr Code erforderlich ist:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
</svg>

Um einen Schlagschatteneffekt zu erzeugen, werden drei Filter verwendet (Abbildung c):

1. Das Filterprimitiv <feOffset> wird verwendet, um eine Ebene in SVG zu versetzen. Es nimmt in="SourceAlpha" und verschiebt das Ergebnis um 10 Pixel nach rechts und 10 Pixel nach unten und speichert das Ergebnis im Puffer als offset. Beachten Sie, dass der Alphakanal der Form als Eingabe verwendet wird. Der Wert SourceAlpha führt zu einem schwarzen Ergebnis (Abbildung a).
2. <feGaussianBlur> nimmt in="offset", wendet eine Unschärfe von stdDeviation="3" an und speichert das Ergebnis in einem temporären Puffer namens "blur".
3. Der Filter <feBlend> vermischt zwei Objekte; Es werden zwei Eingaben in="SourceGraphic" und in2="blur" benötigt und dann die SourceGraphic über das versetzte schwarze unscharfe Bild gemischt (Abbildung b). Sein mode-Attribut gibt den Mischmodus an.

Die folgende Abbildung veranschaulicht Schritt für Schritt die Erstellung eines Schlagschattens:

Filterprimitiv feDropShadow

In SVG kann der Schatteneffekt mithilfe des Filterprimitivs feDropShadow für das Element <filter> erzielt werden. Das Element <feDropShadow> verfügt über die zum Erstellen des Schlagschattens erforderlichen Attribute wie dx, dy und stdDeviation und ermöglicht Ihnen außerdem, dem Schlagschatten Farbe und Transparenz hinzuzufügen! Dies wird durch die Attribute flood-color und flood-opacity erreicht. Sehen wir uns an, wie man mit dem Filterprimitiv feDropShadow einen Schatteneffekt erstellt:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
        <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
			<feDropShadow dx="10" dy="10" stdDeviation="3"  flood-color="CornflowerBlue" />
		</filter>
	</defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
</svg>

Hinweis: Wenn das Attribut flood-color nicht oder falsch angegeben ist, ist der Standardschatten schwarz.

Schlagschatten – C#-Code

Hier schreiben wir den C#-Code, um mithilfe von drei Filterprimitiven einen Schlagschatteneffekt für ein orangefarbenes Rechteck zu erzeugen.

Der folgende Codeausschnitt zeigt, wie Sie mithilfe der Aspose.SVG for .NET-API einen Schlagschatteneffekt erstellen.

1. Verwenden Sie den Konstruktor SVGDocument(), um ein leeres SVG-Dokument zu erstellen.
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:
   • Verwenden Sie die Methode CreateElementNS(), um eine Instanz der Klasse SVGDefsElement zu erstellen.
   • Verwenden Sie die Methode AppendChild(), um das Element <defs> zum Element <svg> hinzuzufügen.
4. Erstellen Sie ein <filter>-Element, legen Sie Attribute fest und fügen Sie es dem <defs>-Element hinzu: – Verwenden Sie die Methode CreateElementNS() der SVGDocument-Klasse, um eine Instanz der Klasse SVGFilterElement zu erstellen.
   • Rufen Sie die Methode SetAttribute(name, value) auf, um die Attribute x, y, height und width festzulegen.
   • Vergessen Sie nicht, das Attribut id festzulegen.
   • Verwenden Sie die Methode AppendChild(), um den <filter> zum <defs>-Element hinzuzufügen.
5. Erstellen Sie ein <feOffset>-Element, legen Sie Attribute fest und fügen Sie es dem <filter>-Element hinzu: – Verwenden Sie die Methode CreateElementNS() der SVGDocument-Klasse, um eine Instanz der Klasse SVGFEOffsetElement zu erstellen.
   • Rufen Sie die Methode SetAttribute(name, value) auf, um die Attribute dx, dy und result festzulegen.
   • Vergessen Sie nicht, das Attribut in1 festzulegen. Verwenden Sie die Eigenschaft des Typs SVGAnimatedLength, deren statische Daten über die Konstruktion feOffsetElement.In1.BaseVal = "SourceAlpha" festgelegt oder gelesen werden können.
   • Verwenden Sie die Methode AppendChild(), um <feOffset> zum <filter>-Element hinzuzufügen.
6. Erstellen Sie auf ähnliche Weise Attribute, legen Sie Attribute fest und fügen Sie dem Element <filter> Elemente wie <feGaussianBlur> und <feBlend> hinzu.
7. Erstellen Sie ein rechteckiges <rect>-Element, das eine SVG-Form mit einem Schlagschatteneffekt sein wird. Ihm wird eine Füllfarbe (#ffa500 – orange) zugewiesen und das Attribut filter wird auf url(#shadow) gesetzt, wodurch auf den zuvor definierten Filter mit der Id = "shadow" verwiesen wird.
8. Rufen Sie die Methode Save() auf, um das Dokument mit dem Schlagschattenfilter in einer durch den Pfad angegebenen lokalen Datei zu speichern.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Apply drop shadow effect for an SVG rectangle using C#

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feOffset> filter primitive and add it to the filterElement
    SVGFEOffsetElement feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
    feOffsetElement.In1.BaseVal = "SourceAlpha";
    feOffsetElement.SetAttribute("result", "offset");
    feOffsetElement.SetAttribute("dx", "10");
    feOffsetElement.SetAttribute("dy", "10");
    filterElement.AppendChild(feOffsetElement);

    // Create a <feGaussianBlur> filter primitive and add it to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "offset";
    feGaussianBlurElement.StdDeviationX.BaseVal = 3;
    feGaussianBlurElement.StdDeviationY.BaseVal = 3;
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a <feBlend> filter primitive and add it to the filterElement
    SVGFEBlendElement feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
    feBlendElement.In1.BaseVal = "SourceGraphic";
    feBlendElement.In2.BaseVal = "blur";
    feBlendElement.SetAttribute("mode", "normal");
    filterElement.AppendChild(feBlendElement);

    // Create a <rect> element and set the "fill" and "filter" attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 40;
    rectElement.Y.BaseVal.Value = 40;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "#ffa500");
    rectElement.SetAttribute("filter", "url(#shadow)");
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
}

Wenn Sie diesen C#-Code ausführen, wird eine SVG-Datei mit einem Schlagschatteneffekt für ein orangefarbenes Rechteck generiert. Der Schatten ist schwarz und um 10 Einheiten horizontal und 10 Einheiten vertikal vom Quellrechteck versetzt. Die resultierende Datei drop-shadow-effect.svg sieht aus wie Abbildung c – ein orangefarbenes Rechteck mit einem schwarzen Schatten.

Schlagschatteneffekt mithilfe der SVG Builder-API

Die Aspose.SVG Builder-API wurde für die optimierte Erstellung und Aktualisierung von SVG-Elementen in C# entwickelt. Schauen wir uns ein C#-Beispiel für die Implementierung des Schlagschatteneffekts an (genau das gleiche Beispiel wie im vorherigen Absatz) mit der SVG Builder API. Dieser Code demonstriert die Verwendung eines Fluent-Builder-Musters (fluent builder pattern) zum Erstellen prägnanter und lesbarer SVG-Dokumente unter Nutzung der Funktionen der Aspose.SVG-Bibliothek:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create an SVG <rect> with drop shadow using SVG Builder in C#

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        //.Width(400).Height(400)
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(10).Dy(10)
                    .StdDeviation(3)
                )
            )
        )
        .AddRect(r => r
            .Rect(40, 40, 100, 100)
            .Filter(f => f.FilterId("shadow"))
            .Style(s => s.Fill(Color.Orange))
        )
        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    //.Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
}

Mit dem Fluent Builder-Muster können Sie SVG-Elemente erstellen und Filter präziser und lesbarer anwenden. Jeder Methodenaufruf, z. B. .AddFilter oder .AddRect, gibt seinen Zweck klar an, sodass Sie die Struktur des SVG-Dokuments auf einen Blick verstehen können. Dieses Beispiel zeigt einen aussagekräftigeren Ansatz zum Erstellen von SVG-Dokumenten mit SVG Builder und bietet eine verbesserte Lesbarkeit, Wartbarkeit und Flexibilität im Vergleich zum manuellen Ansatz zum Erstellen von Elementen, der im vorherigen Beispiel gezeigt wurde. Als Ergebnis der Ausführung des Codes erhalten wir dasselbe orangefarbene Rechteck mit einem schwarzen Schatten:

Text-Schlagschatten

Dieses C#-Beispiel erstellt eine SVG-Datei ähnlich der, die wir zuvor im Abschnitt feDropShadow-Filterprimitiv gesehen haben. Nur hier verwenden wir das Filterprimitiv feDropShadow, um einen farbigen Schatten für einen SVG-Text zu erstellen, nicht für das orangefarbene Rechteck.

Der folgende Codeausschnitt zeigt, wie Sie mit der Aspose.SVG for .NET-API einen Text-Schatten erstellen:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Add a colored drop shadow effect to <text> in SVG programmatically

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "text-shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feDropShadow> filter primitive and add it to the filterElement
    SVGFEDropShadowElement feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
    feDropShadowElement.StdDeviationX.BaseVal = 3;
    feDropShadowElement.StdDeviationY.BaseVal = 3;
    feDropShadowElement.SetAttribute("dx", "3");
    feDropShadowElement.SetAttribute("dy", "3");
    feDropShadowElement.SetAttribute("flood-color", "LightCoral");
    filterElement.AppendChild(feDropShadowElement);

    // Create a <text> element and add it to the svgElement
    SVGTextElement textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
    textElement.Style.FontSize = "4em";
    textElement.SetAttribute("x", "20px");
    textElement.SetAttribute("fill", "CornflowerBlue");
    textElement.SetAttribute("y", "100px");
    textElement.TextContent = "Drop Shadow Effect";
    textElement.SetAttribute("filter", "url(#text-shadow)");
    svgElement.InsertBefore(textElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
}

Text-Schlagschatten – Verwenden von SVG Builder

Genau das gleiche Beispiel für Text mit farbigem Schatten, aber wir implementieren es mit Aspose.SVG Builder:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Add a colored drop shadow effect to <text> in SVG using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(3).Dy(3)
                    .StdDeviation(3)
                    .FloodColor(Color.LightCoral)
                )
            )
        )
        .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
            .Filter(f => f.FilterId("shadow"))
            .AddContent("Drop Shadow Effect")
        )

        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
}

Die resultierenden Bilder text-drop-shadow.svg und text-drop-shadow-builder.svg sehen folgendermaßen aus:

Der Text hat einen Schlagschatten mit der Füllfarbe LightCoral und einem Unschärferadius von 3 Einheiten. Der Schatten wird horizontal um 3 Einheiten und vertikal um 3 Einheiten vom Text versetzt, wodurch ein optisch ansprechender Schlagschatteneffekt entsteht.

Siehe auch

• Weitere Informationen zu Filterprimitiven finden Sie im W3C Filter Effects Module.
• Wenn Sie sich fragen, wie Sie SVG-Code schreiben, um SVG-Filter, Gaußsche Unschärfe, Schatteneffekte, Lichteffekte oder lineare Farbverläufe und radiale Farbverläufe zu erstellen, lesen Sie bitte den Artikel SVG-Filter und -Verläufe.
• 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.