Helpful resources ▼
  Download   Pricing   Buy

Ombre portée – Filtres SVG – Code C#

Filtres SVG

Aspose.SVG pour .NET vous permet d’ouvrir, de créer ou de modifier un document SVG et d’apporter des modifications à son contenu. Vous pouvez appliquer de nombreux filtres SVG disponibles pour les éléments SVG ou les bitmaps afin d’obtenir le résultat souhaité. L’espace de noms Aspose.Svg.Filters contient des classes et des interfaces liées aux effets de filtre dans la spécification SVG. Pour créer un effet d’ombre portée, vous pouvez utiliser quelques primitives de filtre :

Dans cet article, vous apprendrez à écrire du code SVG pour créer un filtre d’ombre portée et examinerez des exemples C# détaillés d’utilisation de l’espace de noms Aspose.Svg.Filters pour appliquer l’effet d’ombre portée aux éléments SVG ou aux bitmaps.

Ombre portée – Drop Shadow – Code SVG

L’effet d’ombre en SVG est un effet visuel courant utilisé pour créer l’illusion d’une ombre derrière un élément SVG. Il apporte de la profondeur et du réalisme au contenu SVG en donnant l’impression que l’élément flotte au-dessus de l’arrière-plan. En outre, un effet d’ombre portée peut être utilisé pour faire ressortir une image. Il existe plusieurs façons d’implémenter l’effet d’ombre en SVG. Examinons-en deux.

Remarque: En SVG, le filtre est défini par l’élément <filter>, qui est défini dans un élément <defs>. Il n’est jamais rendu lui-même et est décrit conceptuellement comme l’élément qui inclut ses enfants – les primitives de filtre. L’élément <filter> possède un ensemble d’attributs. Les attributs requis pour la primitive de filtre sont x, y, width, height et id. Ils définissent la zone de l’image à laquelle le filtre sera appliqué. Et l’attribut id donne un identifiant unique à un élément SVG et identifie un élément dans un document SVG.

Primitives de filtre feOffset + feGaussianBlur + feBlend

À notre avis, le plus efficace est d’utiliser trois filtres pour obtenir l’effet d’ombre. Cela vous permettra d’affiner l’effet même si cela nécessite plus de code :

 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>

Trois filtres sont utilisés pour créer un effet d’ombre portée (figure c):

  1. La primitive de filtre <feOffset> est utilisée pour décaler un calque en SVG. Il prend in="SourceAlpha", décale le résultat de 10 px vers la droite et de 10 px vers le bas, et stocke le résultat dans le tampon sous "offset". Notez que le canal alpha de la forme est utilisé comme entrée. La valeur SourceAlpha conduit à un résultat de couleur noire (figure a).
  2. <feGaussianBlur> prend in="offset", applique un flou de stdDeviation="3" et stocke le résultat dans un tampon temporaire nommé "blur".
  3. Le filtre <feBlend> mélange deux objets ; il prend deux entrées in="SourceGraphic" et in2="blur" puis mélange le SourceGraphic au-dessus de l’image floue noire décalée (figure b). Son attribut mode spécifie le mode de fusion.

La figure suivante illustre étape par étape la création d’une ombre portée :

Texte “Effet d’ombre portée pour le rectangle orange – illustration étape par étape”

Primitive de filtre feDropShadow

En SVG, l’effet d’ombre peut être obtenu en utilisant la primitive de filtre feDropShadow sur l’élément <filter>. L’élément <feDropShadow> possède les attributs nécessaires pour créer l’ombre portée, tels que dx, dy et stdDeviation, et il vous permet également d’ajouter de la couleur et de la transparence à l’ombre portée! Ceci est réalisé en utilisant les attributs flood-color et flood-opacity. Voyons comment créer un effet d’ombre à l’aide de la primitive de filtre feDropShadow:

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>

Texte “Effet d’ombre portée pour un rectangle orange avec une ombre de couleur”

Remarque: si l’attribut flood-color n’est pas spécifié ou est mal spécifié, alors l’ombre par défaut sera noire.

Ombre portée – Code C#

Ici, nous allons écrire le code С# pour créer un effet d’ombre portée pour un rectangle orange à l’aide de trois primitives de filtre.

L’extrait de code suivant montre comment créer un effet d’ombre portée à l’aide de l’API Aspose.SVG pour .NET.

  1. Utilisez le constructeur SVGDocument() pour créer un document SVG vide.
  2. La propriété RootElement de la classe SVGDocument pointe vers l’élément racine <svg> du document.
  3. Créez un élément <defs> et ajoutez-le à l’élément <svg>:
  4. Créez un élément <filter>, définissez les attributs et ajoutez-le à l’élément <defs> :
    • Utilisez la méthode CreateElementNS() de la classe SVGDocument pour créer une instance de la classe SVGFilterElement.
    • Appelez la méthode SetAttribute(name, value) pour définir les attributs x, y, height et width.
    • N’oubliez pas de définir l’attribut id.
    • Utilisez la méthode AppendChild() pour ajouter le <filter> à l’élément <defs>.
  5. Créez un élément <feOffset>, définissez les attributs et ajoutez-le à l’élément <filter> :
    • Utilisez la méthode CreateElementNS() de la classe SVGDocument pour créer une instance de la classe SVGFEOffsetElement.
    • Appelez la méthode SetAttribute() pour définir les attributs dx, dy et result.
    • N’oubliez pas de définir l’attribut in1. Utilisez la propriété de type SVGAnimatedLength, dont les données statiques peuvent être définies ou lues via la construction feOffsetElement.In1.BaseVal = "SourceAlpha".
    • Utilisez la méthode AppendChild() pour ajouter le <feOffset> à l’élément <filter>.
  6. De la même manière, créez, définissez des attributs et ajoutez à l’élément <filter> des éléments tels que <feGaussianBlur> et <feBlend>.
  7. Créez un élément rectangle <rect> qui sera une forme SVG avec un effet d’ombre portée. Il reçoit une couleur fill (#ffa500 – orange) et l’attribut filter est défini sur "url(#shadow)," faisant référence au filtre précédemment défini avec Id = "shadow".
  8. Appelez la méthode Save() pour enregistrer le document avec le filtre d’ombre portée dans un fichier local spécifié par chemin.
 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    }

Lorsque vous exécutez ce code C#, il génère un fichier SVG avec un effet d’ombre portée pour un rectangle orange. L’ombre sera de couleur noire, décalée de 10 unités horizontalement et de 10 unités verticalement par rapport au rectangle source. Le fichier drop-shadow-effect.svg résultant ressemble à la figure c: un rectangle orange avec une ombre noire.

Ombre portée du texte – Text Drop Shadow

Cet exemple C# crée un fichier SVG similaire à celui que nous avons vu précédemment dans la section feDropShadow filter primitive. Seulement ici, nous utilisons la primitive de filtre feDropShadow pour créer une ombre colorée pour un texte SVG, pas pour le rectangle orange.

L’extrait de code suivant montre comment créer une ombre portée de texte à l’aide de l’API Aspose.SVG pour .NET:

 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    }

L’image text-drop-shadow.svg résultante ressemble à ceci :

Texte “Un effet d’ombre portée est appliqué au texte – Effet Ombre portée”

Le texte comporte une ombre portée avec une couleur de remplissage LightCoral et un rayon de flou de 3 unités. L’ombre sera décalée de 3 unités horizontalement et de 3 unités verticalement par rapport au texte, créant ainsi un effet d’ombre portée visuellement attrayant.

Voir également

  • Pour plus d’informations sur les primitives de filtre, voir le W3C Filter Effects Module.
  • Si vous vous demandez comment écrire du code SVG pour créer des filtres SVG, un flou gaussien, des effets d’ombre, des effets d’éclairage ou un dégradé linéaire et un dégradé radial, veuillez consulter l’article Filtres et dégradés SVG.
  • Vous pouvez télécharger les exemples complets et les fichiers de données depuis GitHub.
  • À propos du téléchargement depuis GitHub et de l’exécution d’exemples, vous le découvrirez dans la section Comment exécuter les exemples.
Flou gaussien Effets d'éclairage SVG
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

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