Effetto ombra esterna SVG C#

Le immagini SVG sono immagini vettoriali compatibili con il Web che possono essere ricercate, indicizzate, compresse e sottoposte a script. Considerando che le ombre sono una caratteristica di design comune che viene utilizzata per rendere le immagini esteticamente accattivanti e prominenti. A volte, potrebbe essere necessario aggiungere un effetto ombra discendente a un’immagine SVG, ad esempio un’icona, un testo e così via. Di conseguenza, questo articolo spiega come creare un effetto ombra discendente su un’immagine SVG a livello di codice in C#.

Effetto ombra esterna sull’immagine SVG - Download gratuito dell’API C#

Aspose.SVG for .NET supporta l’utilizzo di immagini SVG in quanto offre molte funzionalità per modificare, aggiornare o convertire grafica vettoriale scalabile a livello di codice in C#. Accedi semplicemente ai file DLL di riferimento dalla pagina Nuove versioni oppure esegui il comando NuGet di seguito per configurarlo dalla raccolta NuGet, insieme a tutte le dipendenze, se presenti.

PM> Install-Package Aspose.SVG

Come creare un effetto ombra esterna sull’immagine SVG in C#

I seguenti passaggi descrivono l’intero processo di aggiunta di un effetto ombra esterna su un’immagine SVG:

  1. Crea un oggetto della classe SVGDocument.
  2. Imposta l’URL dello spazio dei nomi SVG e ottieni l’elemento SVG radice.
  3. Crea defs elemento e un filterElement per aggiungere la primitiva del filtro feOffset.
  4. Crea un filtro feBlend e un elemento di testo.
  5. Salva l’immagine SVG di output con l’effetto Drop Shadow chiamando il metodo Save.

Crea un effetto ombra esterna sull’immagine SVG a livello di codice in C#

Segui i passaggi seguenti per creare un effetto ombra esterna sull’immagine SVG a livello di codice in C#:

  1. Crea un oggetto della classe SVGDocument.
  2. Imposta l’URL dello spazio dei nomi SVG e ottieni l’elemento SVG radice.
  3. Crea defs elemento e un filterElement per aggiungere la primitiva del filtro feOffset.
  4. Crea un filtro feBlend e un elemento di testo.
  5. Salva l’immagine SVG di output con un effetto Drop Shadow chiamando il metodo Save.

Il frammento di codice seguente mostra come creare un effetto ombra esterna su un’immagine SVG in C#:

// Inizializza un oggetto della classe SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Imposta l'URL dello spazio dei nomi SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Ottieni l'elemento svg radice del documento
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Crea un elemento defs e aggiungilo a svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Crea un elemento filtro e aggiungilo a defsElement
var filterElement = (Aspose.Svg.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);

// Crea una primitiva di filtro feOffset e aggiungila a filterElement
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);

//// Crea una primitiva di filtro feGaussianBlur e aggiungila a filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "spostamento";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("risultato", "sfocatura");
//filterElement.AppendChild(feGaussianBlurElement);

// Crea una primitiva di filtro feBlend e aggiungila a filterElement
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);

// Crea un elemento di testo e aggiungilo a svgElement
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);

// Salva il documento SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Si noti che alcune righe di codice sono commentate nello snippet di codice sopra. Puoi scegliere di rimuovere il commento per applicare l’effetto sfocatura gaussiana sull’ombra se preferisci un effetto ombra discendente sfocato che fa risaltare l’output con un’ombra più liscia.

Ottieni una licenza temporanea gratuita

Puoi richiedere una licenza temporanea gratuita per testare l’API a piena capacità.

Conclusione

In questo articolo si è appreso come creare un effetto ombra discendente su un’immagine SVG a livello di codice in C#. Puoi elaborare un’immagine SVG esistente caricandola o creare una nuova immagine SVG da zero a seconda delle tue esigenze. Inoltre, puoi visitare la sezione documentazione per conoscere molte altre funzionalità dell’API. Se hai bisogno di discutere di qualsiasi domanda o dubbio con noi, non esitare a contattarci tramite forum.

Guarda anche