Helpful resources ▼
  Download   Pricing   Buy

Schlagschatten – SVG-Filter – C#-Code

SVG-Filter

Mit Aspose.SVG für .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:

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:

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

Text „Schlagschatteneffekt für orangefarbenes Rechteck – Schritt-für-Schritt-Anleitung“

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:

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

Text „Schlagschatteneffekt für orangefarbenes Rechteck mit Farbschatten“

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 für .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:
  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.
 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 = "shadow";
19        filterElement.SetAttribute("x", "-20px");
20        filterElement.SetAttribute("y", "-20px");
21        filterElement.SetAttribute("height", "150px");
22        filterElement.SetAttribute("width", "150px");
23        defsElement.AppendChild(filterElement);
24
25        // Create a <feOffset> filter primitive and add it to the filterElement
26        var feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
27        feOffsetElement.In1.BaseVal = "SourceAlpha";
28        feOffsetElement.SetAttribute("result", "offset");
29        feOffsetElement.SetAttribute("dx", "10");
30        feOffsetElement.SetAttribute("dy", "10");
31        filterElement.AppendChild(feOffsetElement);
32
33        // Create a <feGaussianBlur> filter primitive and add it to the filterElement
34        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
35        feGaussianBlurElement.In1.BaseVal = "offset";
36        feGaussianBlurElement.StdDeviationX.BaseVal = 3;
37        feGaussianBlurElement.StdDeviationY.BaseVal = 3;
38        feGaussianBlurElement.SetAttribute("result", "blur");
39        filterElement.AppendChild(feGaussianBlurElement);
40
41        // Create a <feBlend> filter primitive and add it to the filterElement
42        var feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
43        feBlendElement.In1.BaseVal = "SourceGraphic";
44        feBlendElement.In2.BaseVal = "blur";
45        feBlendElement.SetAttribute("mode", "normal");
46        filterElement.AppendChild(feBlendElement);
47
48        // Create a <rect> element and set the "fill" and "filter" attributes
49        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
50        rectElement.X.BaseVal.Value = 40;
51        rectElement.Y.BaseVal.Value = 40;
52        rectElement.Width.BaseVal.Value = 100;
53        rectElement.Height.BaseVal.Value = 100;
54        rectElement.SetAttribute("fill", "#ffa500");
55        rectElement.SetAttribute("filter", "url(#shadow)");
56        svgElement.InsertBefore(rectElement, svgElement.FirstChild);
57
58        // Save the document
59        document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
60    }

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.

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 für .NET-API einen Text-Schatten erstellen:

 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 a <defs> element and add to the svgElement
14        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
15        svgElement.AppendChild(defsElement);
16
17        // Creating a <filter> element and add to the defsElement
18        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
19        filterElement.Id = "text-shadow";
20        filterElement.SetAttribute("x", "-20px");
21        filterElement.SetAttribute("y", "-20px");
22        filterElement.SetAttribute("height", "150px");
23        filterElement.SetAttribute("width", "150px");
24        defsElement.AppendChild(filterElement);
25
26        // Create a <feDropShadow> filter primitive and add it to the filterElement
27        var feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
28        feDropShadowElement.StdDeviationX.BaseVal = 3;
29        feDropShadowElement.StdDeviationY.BaseVal = 3;
30        feDropShadowElement.SetAttribute("dx", "3");
31        feDropShadowElement.SetAttribute("dy", "3");
32        //feDropShadowElement.SetAttribute("flood-color", "LightCoral");
33        filterElement.AppendChild(feDropShadowElement);
34
35        // Create a <text> element and add it to the svgElement
36        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
37        textElement.Style.FontSize = "4em";
38        textElement.SetAttribute("x", "20px");
39        textElement.SetAttribute("fill", "CornflowerBlue");
40        textElement.SetAttribute("y", "100px");
41        textElement.TextContent = "Drop Shadow Effect";
42        textElement.SetAttribute("filter", "url(#text-shadow)");
43        svgElement.InsertBefore(textElement, svgElement.FirstChild);
44
45        // Save the document
46        document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
47    }

Das resultierende text-drop-shadow.svg-Bild sieht folgendermaßen aus:

Text „Ein Schlagschatteneffekt wird auf den Text angewendet – Schlagschatteneffekt“

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.
Gaußsche Unschärfe SVG-Lichteffekte
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

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