Drop Shadow Effect SVG C#

SVG-bilder är webbvänliga vektorbilder som kan sökas, indexeras, komprimeras och skriptas. Medan skuggor är en vanlig designfunktion som används för att göra bilder estetiskt tilltalande och framträdande. Ibland kan du behöva lägga till en skuggeffekt till en SVG-bild, som en ikon eller text, etc. Följaktligen förklarar den här artikeln hur du skapar en skuggeffekt på en SVG-bild programmatiskt i C#.

Skuggeffekt på SVG-bild – C# API gratis nedladdning

Aspose.SVG for .NET stöder arbete med SVG-bilder eftersom det erbjuder många funktioner för att redigera, uppdatera eller konvertera skalbar vektorgrafik programmatiskt i C#. Gå bara till referens-DLL-filerna från sidan New Releases eller kör NuGet-kommandot nedan för att konfigurera det från NuGet-galleriet, tillsammans med alla beroenden, om några.

PM> Install-Package Aspose.SVG

Hur man skapar en skuggeffekt på SVG-bild i C#

Följande steg beskriver hela processen med att lägga till en skuggeffekt på en SVG-bild:

  1. Skapa ett objekt av klassen SVGDocument.
  2. Ställ in SVG Namespace URL och hämta root SVG element.
  3. Skapa defs-element och ett filterElement för att lägga till feOffset-filterprimitiv.
  4. Skapa ett feBlend-filter och ett textelement.
  5. Spara den utgående SVG-bilden med Drop Shadow-effekten genom att anropa Save-metoden.

Skapa skuggeffekt på SVG-bild Programmatiskt i C#

Följ stegen nedan för att skapa en skuggeffekt på SVG-bilden programmatiskt i C#:

  1. Skapa ett objekt av klassen SVGDocument.
  2. Ställ in SVG Namespace URL och hämta root SVG element.
  3. Skapa defs-element och ett filterElement för att lägga till feOffset-filterprimitiv.
  4. Skapa ett feBlend-filter och ett textelement.
  5. Spara den utgående SVG-bilden med en Drop Shadow-effekt genom att anropa metoden Save.

Kodavsnittet nedan visar hur man skapar en skuggeffekt på en SVG-bild i C#:

// Initiera ett objekt av SVGDocument-klassen
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Ställ in SVG-namnutrymmesadress
string SvgNamespace = "http://www.w3.org/2000/svg";

// Hämta root svg-elementet i dokumentet
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Skapa ett defs-element och lägg till i svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Skapa ett filterelement och lägg till i 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);

// Skapa en feOffset-filterprimitiv och lägg till filterElementet
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);

//// Skapa en feGaussianBlur-filterprimitiv och lägg till i filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "offset";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("resultat", "oskärpa");
//filterElement.AppendChild(feGaussianBlurElement);

// Skapa en feBlend-filterprimitiv och lägg till filterElementet
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);

// Skapa ett textelement och lägg till i 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);

// Spara SVG-dokumentet
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Observera att några rader kod kommenteras ut i kodavsnittet ovan. Du kan välja att avkommentera det för att applicera Gaussisk oskärpa på skuggan om du föredrar en suddig skuggeffekt som gör att utskriften sticker ut med en jämnare skugga.

Få gratis tillfällig licens

Du kan begära en gratis temporär licens för att testa API:et till dess fulla kapacitet.

Slutsats

I den här artikeln har du lärt dig hur du skapar en skuggeffekt på en SVG-bild programmatiskt i C#. Du kan bearbeta en befintlig SVG-bild genom att ladda den eller skapa en ny SVG-bild från början beroende på dina krav. Dessutom kan du besöka avsnittet dokumentation för att lära dig många andra funktioner i API:et. Om du behöver diskutera några frågor eller funderingar med oss, tveka inte att kontakta oss via forum.

Se även