Efekt cienia SVG C#

Obrazy SVG to przyjazne dla Internetu obrazy wektorowe, które można wyszukiwać, indeksować, kompresować i skryptować. Podczas gdy cienie są powszechną cechą projektową, która jest używana do tworzenia atrakcyjnych i wyróżniających się obrazów. Czasami może być konieczne dodanie efektu cienia do obrazu SVG, takiego jak ikona, tekst itp. W związku z tym w tym artykule wyjaśniono, jak programowo utworzyć efekt cienia na obrazie SVG w języku C#.

Efekt cienia na obrazie SVG – C# API do pobrania za darmo

Aspose.SVG for .NET obsługuje pracę z obrazami SVG, ponieważ oferuje wiele funkcji do edytowania, aktualizowania lub programowego konwertowania skalowalnej grafiki wektorowej w języku C#. Po prostu uzyskaj dostęp do referencyjnych plików DLL ze strony New Releases lub uruchom poniższe polecenie NuGet, aby skonfigurować je z galerii NuGet wraz ze wszystkimi zależnościami, jeśli takie istnieją.

PM> Install-Package Aspose.SVG

Jak stworzyć efekt cienia na obrazie SVG w C#

Poniższe kroki opisują cały proces dodawania efektu cienia do obrazu SVG:

  1. Utwórz obiekt klasy SVGDocument.
  2. Ustaw adres URL przestrzeni nazw SVG i pobierz główny element SVG.
  3. Utwórz element defs i element filterElement, aby dołączyć prymityw filtra feOffset.
  4. Utwórz filtr feBlend i element tekstowy.
  5. Zapisz wyjściowy obraz SVG z efektem cienia, wywołując metodę Save.

Utwórz programowo efekt cienia na obrazie SVG w C#

Wykonaj poniższe czynności, aby programowo utworzyć efekt cienia na obrazie SVG w języku C#:

  1. Utwórz obiekt klasy SVGDocument.
  2. Ustaw adres URL przestrzeni nazw SVG i pobierz główny element SVG.
  3. Utwórz element defs i element filterElement, aby dołączyć prymityw filtra feOffset.
  4. Utwórz filtr feBlend i element tekstowy.
  5. Zapisz wyjściowy obraz SVG z efektem cienia, wywołując metodę Save.

Poniższy fragment kodu pokazuje, jak utworzyć efekt cienia na obrazie SVG w języku C#:

// Zainicjuj obiekt klasy SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Ustaw adres URL przestrzeni nazw SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Pobierz główny element svg dokumentu
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Utwórz element defs i dodaj go do elementu svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Utwórz element filtru i dodaj go do elementu 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);

// Utwórz element podstawowy filtru feOffset i dodaj go do elementu 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);

//// Utwórz prymityw filtra feGaussianBlur i dodaj go do elementu filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "przesunięcie";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("wynik", "rozmycie");
//filterElement.AppendChild(feGaussianBlurElement);

// Utwórz prymityw filtru feBlend i dodaj go do elementu 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);

// Utwórz element tekstowy i dodaj go do elementu 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);

// Zapisz dokument SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Należy pamiętać, że w powyższym fragmencie kodu kilka wierszy kodu zostało zakomentowanych. Możesz usunąć komentarz, aby zastosować efekt rozmycia gaussowskiego na cieniu, jeśli wolisz efekt rozmytego cienia, który sprawia, że wydruk wyróżnia się gładszym cieniem.

Uzyskaj bezpłatną tymczasową licencję

Możesz poprosić o bezpłatną licencję tymczasową, aby przetestować interfejs API z pełną wydajnością.

Wniosek

W tym artykule nauczyłeś się programowo tworzyć efekt cienia na obrazie SVG w języku C#. Możesz przetworzyć istniejący obraz SVG, ładując go lub utworzyć nowy obraz SVG od podstaw, w zależności od wymagań. Ponadto możesz odwiedzić sekcję dokumentacja, aby poznać wiele innych funkcji interfejsu API. Jeśli chcesz omówić z nami jakiekolwiek pytania lub wątpliwości, skontaktuj się z nami za pośrednictwem forum.

Zobacz też