Эффект тени SVG C#

Изображения SVG — это векторные изображения, удобные для использования в Интернете, которые можно искать, индексировать, сжимать и создавать сценарии. Принимая во внимание, что тени — это обычная особенность дизайна, которая используется для того, чтобы сделать изображения эстетически привлекательными и заметными. Иногда вам может понадобиться добавить эффект тени к изображению SVG, например к значку, тексту и т. д. Соответственно, в этой статье объясняется, как программно создать эффект тени для изображения SVG на C#.

Эффект тени на изображении SVG — Скачать C# API бесплатно

Aspose.SVG для .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 с эффектом тени, вызвав метод Save.

Создайте эффект тени на изображении SVG программно в С#

Выполните следующие шаги, чтобы программно создать эффект тени на изображении 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. Если вам нужно обсудить с нами какие-либо вопросы или проблемы, пожалуйста, не стесняйтесь обращаться к нам через форум.

Смотрите также