Ефект тіні SVG C#

Зображення SVG – це векторні зображення, зручні для Інтернету, які можна шукати, індексувати, стискати та створювати сценарії. Тоді як тіні — це звичайна функція дизайну, яка використовується, щоб зробити зображення естетично привабливими та помітними. Іноді вам може знадобитися додати ефект тіні до зображення SVG, як-от значок, текст тощо. Відповідно, у цій статті пояснюється, як створити ефект тіні на зображенні SVG програмним шляхом у C#.

Ефект тіні на зображенні SVG – безкоштовне завантаження C# API

Aspose.SVG for .NET підтримує роботу із зображеннями SVG, оскільки пропонує багато функцій для програмного редагування, оновлення або конвертації масштабованої векторної графіки на C#. Просто перейдіть до довідкових файлів DLL зі сторінки Нові випуски або запустіть команду NuGet нижче, щоб налаштувати її з галереї NuGet разом із усіма залежностями, якщо такі є.

PM> Install-Package Aspose.SVG

Як створити ефект тіні на зображенні SVG у C#

Наступні кроки описують весь процес додавання ефекту тіні до зображення SVG:

  1. Створіть об’єкт класу SVGDocument.
  2. Установіть URL-адресу простору імен SVG і отримайте кореневий елемент SVG.
  3. Створіть елемент defs і filterElement, щоб додати примітив фільтра feOffset.
  4. Створіть фільтр feBlend і текстовий елемент.
  5. Збережіть вихідне зображення SVG з ефектом «Тінь», викликавши метод «Зберегти».

Створення ефекту тіні на зображенні SVG програмним способом у C#

Будь ласка, виконайте наведені нижче кроки, щоб створити ефект тіні на зображенні SVG програмним шляхом у C#:

  1. Створіть об’єкт класу SVGDocument.
  2. Установіть URL-адресу простору імен SVG і отримайте кореневий елемент SVG.
  3. Створіть елемент defs і filterElement, щоб додати примітив фільтра feOffset.
  4. Створіть фільтр feBlend і текстовий елемент.
  5. Збережіть вихідне зображення SVG з ефектом «Тінь», викликавши метод Save.

Наведений нижче фрагмент коду показує, як створити ефект тіні на зображенні SVG у C#:

// Ініціалізація об’єкта класу SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Установити URL-адресу простору імен SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Отримати кореневий елемент svg документа
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Створіть елемент defs і додайте його до svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Створіть елемент фільтра та додайте його до елемента 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);

// Створіть примітив фільтра feOffset і додайте його до 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);

//// Створіть примітив фільтра feGaussianBlur і додайте його до filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "зсув";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("результат", "розмиття");
//filterElement.AppendChild(feGaussianBlurElement);

// Створіть примітив фільтра feBlend і додайте його до 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);

// Створіть текстовий елемент і додайте його до 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);

// Збережіть документ SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Зверніть увагу, що кілька рядків коду закоментовано у наведеному вище фрагменті коду. Ви можете розкоментувати його, щоб застосувати ефект розмиття за Гауссом до тіні, якщо ви віддаєте перевагу ефекту розмитої тіні, завдяки якому результат буде виділятися більш гладкою тінню.

Отримайте безкоштовну тимчасову ліцензію

Ви можете запросити безкоштовну тимчасову ліцензію, щоб перевірити API на повну потужність.

Висновок

У цій статті ви дізналися, як програмно створити ефект тіні на зображенні SVG у C#. Ви можете обробити наявне зображення SVG, завантаживши його, або створити нове зображення SVG з нуля залежно від ваших вимог. Крім того, ви можете відвідати розділ документація, щоб дізнатися про багато інших функцій API. Якщо вам потрібно обговорити з нами будь-які запитання чи проблеми, будь ласка, зв’яжіться з нами через форум.

Дивись також